/* ============================================================
   WoW Housing Decor Catalog — .hc-* namespaced styles
   Dark atmospheric gaming UI with gold/amber accents
   ============================================================ */

/* --- Reset & Foundation --- */
.hc-body {
  margin: 0;
  padding: 0;
  background: #0a0d14;
  color: #c8ccd4;
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  height: 100vh;
}

/* --- Custom Scrollbar (all hc containers) --- */
.hc-body ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.hc-body ::-webkit-scrollbar-track {
  background: #0e1118;
}
.hc-body ::-webkit-scrollbar-thumb {
  background: #2a2d35;
  border-radius: 3px;
}
.hc-body ::-webkit-scrollbar-thumb:hover {
  background: #c5993e;
}

/* --- Layout Shell --- */
.hc-app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: linear-gradient(170deg, #0a0d14 0%, #0f1219 50%, #0a0d14 100%);
}

/* --- Header --- */
.hc-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  background: #0d1017;
  border-bottom: 1px solid #1a1d25;
  flex-shrink: 0;
  z-index: 100;
}

.hc-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.hc-logo-icon {
  width: 40px;
  height: 40px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(255, 209, 0, .25));
}

.hc-title {
  font-family: 'Cinzel', 'Georgia', serif;
  font-weight: 600;
  font-size: 18px;
  color: #d4a54a;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.hc-header-spacer {
  flex: 1;
}

.hc-search-wrapper {
  position: relative;
  flex: 0 1 360px;
  min-width: 200px;
}

.hc-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #555b66;
  font-size: 13px;
  pointer-events: none;
}

.hc-search {
  width: 100%;
  padding: 8px 12px 8px 34px;
  background: #141820;
  border: 1px solid #2a2d35;
  border-radius: 6px;
  color: #c8ccd4;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

.hc-search::placeholder {
  color: #555b66;
}

.hc-search:focus {
  border-color: #c5993e;
  box-shadow: 0 0 0 3px rgba(197, 153, 62, 0.15);
}

.hc-sort-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.hc-sort-label {
  font-size: 12px;
  color: #6b7280;
  white-space: nowrap;
}

.hc-sort-select {
  padding: 7px 28px 7px 10px;
  background: #141820;
  border: 1px solid #2a2d35;
  border-radius: 6px;
  color: #c8ccd4;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color 0.2s;
}

.hc-sort-select:focus {
  border-color: #c5993e;
}

.hc-item-count {
  font-size: 12px;
  color: #6b7280;
  white-space: nowrap;
  flex-shrink: 0;
}

.hc-item-count strong {
  color: #d4a54a;
  font-weight: 600;
}

/* --- Main Body (sidebar + content) --- */
.hc-main {
  display: flex;
  flex: 1;
  overflow: hidden;
  position: relative;
}

/* --- Sidebar --- */
.hc-sidebar {
  width: 280px;
  min-width: 280px;
  background: #0d1017;
  border-right: 1px solid #1a1d25;
  overflow-y: auto;
  overflow-x: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.hc-sidebar-section {
  border-bottom: 1px solid #151920;
}

.hc-sidebar-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #6b7280;
  cursor: pointer;
  user-select: none;
  transition: color 0.15s;
}

.hc-sidebar-heading:hover {
  color: #9ca3af;
}

.hc-sidebar-arrow {
  display: inline-block;
  font-size: 9px;
  transition: transform 0.2s ease;
  color: #555b66;
}

.hc-sidebar-heading.hc-collapsed .hc-sidebar-arrow {
  transform: rotate(-90deg);
}

.hc-sidebar-content {
  padding: 0 12px 12px;
  overflow: hidden;
  transition: max-height 0.25s ease, opacity 0.2s ease;
  max-height: 2000px;
  opacity: 1;
}

.hc-sidebar-content.hc-hidden {
  max-height: 0;
  opacity: 0;
  padding-bottom: 0;
}

/* --- Category Tree --- */
.hc-cat-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hc-cat-item {
  margin: 0;
}

.hc-cat-btn {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 7px 12px;
  background: none;
  border: none;
  border-left: 2px solid transparent;
  border-radius: 0 4px 4px 0;
  color: #9ca3af;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
}

.hc-cat-btn:hover {
  background: rgba(212, 165, 74, 0.06);
  color: #c8ccd4;
}

.hc-cat-btn.hc-active {
  border-left-color: #d4a54a;
  background: rgba(212, 165, 74, 0.1);
  color: #d4a54a;
  font-weight: 500;
}

.hc-cat-btn .hc-cat-name {
  flex: 1;
}

.hc-cat-btn .hc-cat-count {
  font-size: 11px;
  color: #4b5563;
  min-width: 28px;
  text-align: right;
}

.hc-cat-btn.hc-active .hc-cat-count {
  color: rgba(212, 165, 74, 0.6);
}

/* Subcategory */
.hc-subcat-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 16px;
}

.hc-subcat-btn {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 5px 12px;
  background: none;
  border: none;
  border-left: 2px solid transparent;
  border-radius: 0 4px 4px 0;
  color: #6b7280;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
}

.hc-subcat-btn:hover {
  color: #9ca3af;
  background: rgba(212, 165, 74, 0.04);
}

.hc-subcat-btn.hc-active {
  border-left-color: #d4a54a;
  color: #d4a54a;
  background: rgba(212, 165, 74, 0.08);
}

.hc-subcat-btn .hc-cat-count {
  font-size: 11px;
  color: #4b5563;
  min-width: 28px;
  text-align: right;
}

.hc-subcat-btn.hc-active .hc-cat-count {
  color: rgba(212, 165, 74, 0.5);
}

/* --- Filter Checkboxes --- */
.hc-filter-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hc-filter-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 4px;
}

.hc-filter-cb {
  width: 14px;
  height: 14px;
  accent-color: #d4a54a;
  cursor: pointer;
  flex-shrink: 0;
}

.hc-filter-label {
  font-size: 12px;
  color: #9ca3af;
  cursor: pointer;
  flex: 1;
  line-height: 1.4;
}

.hc-filter-label:hover {
  color: #c8ccd4;
}

.hc-filter-count {
  font-size: 11px;
  color: #4b5563;
  min-width: 24px;
  text-align: right;
}

/* Toggle switch (for dyeable) */
.hc-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 4px;
}

.hc-toggle-label {
  font-size: 12px;
  color: #9ca3af;
}

.hc-toggle {
  position: relative;
  width: 34px;
  height: 18px;
  cursor: pointer;
}

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

.hc-toggle-track {
  position: absolute;
  inset: 0;
  background: #2a2d35;
  border-radius: 9px;
  transition: background 0.2s;
}

.hc-toggle input:checked + .hc-toggle-track {
  background: #c5993e;
}

.hc-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: #e5e7eb;
  border-radius: 50%;
  transition: transform 0.2s;
  pointer-events: none;
}

.hc-toggle input:checked ~ .hc-toggle-thumb {
  transform: translateX(16px);
}

/* Color swatches in filter */
.hc-color-swatch-small {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
  flex-shrink: 0;
}

/* --- Content Area --- */
.hc-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* --- Active Filters Bar --- */
.hc-active-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  min-height: 20px;
  flex-wrap: wrap;
  flex-shrink: 0;
  border-bottom: 1px solid #151920;
}

.hc-active-filters:empty {
  display: none;
}

.hc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  background: rgba(212, 165, 74, 0.1);
  border: 1px solid rgba(212, 165, 74, 0.25);
  border-radius: 12px;
  font-size: 11px;
  color: #d4a54a;
  white-space: nowrap;
}

.hc-chip-group {
  font-size: 10px;
  color: rgba(212, 165, 74, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.hc-chip-remove {
  background: none;
  border: none;
  color: rgba(212, 165, 74, 0.5);
  cursor: pointer;
  font-size: 13px;
  padding: 0;
  line-height: 1;
  transition: color 0.15s;
}

.hc-chip-remove:hover {
  color: #d4a54a;
}

.hc-clear-all {
  background: none;
  border: none;
  color: #6b7280;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  cursor: pointer;
  padding: 3px 8px;
  transition: color 0.15s;
}

.hc-clear-all:hover {
  color: #d4a54a;
}

/* --- Item Grid --- */
.hc-grid-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 20px;
}

.hc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}

/* --- Item Card --- */
.hc-card {
  background: #1a1f2e;
  border: 1px solid #2a2d35;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  position: relative;
}

.hc-card:hover {
  transform: translateY(-2px);
  border-color: rgba(212, 165, 74, 0.5);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.3),
    0 0 12px rgba(212, 165, 74, 0.08);
}

.hc-card-thumb {
  width: 100%;
  aspect-ratio: 1;
  background: #12151e;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.hc-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s;
}

.hc-card-thumb img.hc-loaded {
  opacity: 1;
}

.hc-card-thumb-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: #2a2d35;
}

.hc-card-body {
  padding: 10px 12px;
}

.hc-card-name {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hc-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.hc-card-category {
  font-size: 11px;
  color: #555b66;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.hc-card-budget {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.hc-budget-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  filter: drop-shadow(0 0 3px rgba(212, 165, 74, 0.35));
}

.hc-budget-icon-lg {
  width: 26px;
  height: 26px;
}

.hc-budget-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(212, 165, 74, 0.22), rgba(212, 165, 74, 0.08));
  border: 1px solid rgba(212, 165, 74, 0.45);
  color: #f0d68a;
  font-size: 10px;
  font-weight: 700;
  font-family: 'Cinzel', 'Georgia', serif;
  line-height: 1;
}

.hc-budget-num-lg {
  width: 26px;
  height: 26px;
  font-size: 13px;
}

.hc-budget-display {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ============================================================
   Vendor location map preview
   ============================================================ */
.hc-vendor-map {
  position: relative;
  margin-top: 8px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #1a1d25;
  background: #0a0d14;
  max-width: 320px;
  cursor: pointer;
  transition: all 0.25s;
}

/* Faction zone badge — overlaid in the bottom-left of vendor maps so the
   user can tell at a glance whether a Tusked Fireplace map is the Razorwind
   Shores (Horde) one or the Founders Point (Alliance) one without having
   to read the zone name. */
.hc-zone-badge {
  position: absolute;
  bottom: 6px;
  left: 6px;
  width: 38px;
  height: 38px;
  object-fit: contain;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.55);
  padding: 2px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5),
              0 0 0 1px rgba(0, 0, 0, 0.4) inset;
  pointer-events: none;
  z-index: 2;
  transition: transform 0.2s;
}

.hc-vendor-map:hover .hc-zone-badge {
  transform: scale(1.1);
}

.hc-vendor-map:hover {
  border-color: rgba(212, 165, 74, 0.5);
  transform: scale(1.02);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.hc-vendor-map > img:not(.hc-zone-badge) {
  width: 100%;
  height: auto;
  display: block;
  filter: brightness(0.92) saturate(1.05);
}

.hc-map-pin {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50% 50% 50% 0;
  background: #ff4444;
  border: 2px solid #ffd100;
  transform: translate(-50%, -100%) rotate(-45deg);
  box-shadow: 0 0 8px rgba(255, 68, 68, 0.8), 0 2px 4px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  z-index: 2;
}

.hc-map-pin::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 4px;
  height: 4px;
  background: #ffd100;
  border-radius: 50%;
}

.hc-map-coords {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 2px 8px;
  background: rgba(0, 0, 0, 0.85);
  color: #d4a54a;
  font-size: 10px;
  font-weight: 700;
  font-family: 'JetBrains Mono', 'Menlo', monospace;
  border-radius: 3px;
  border: 1px solid rgba(212, 165, 74, 0.3);
  pointer-events: none;
  letter-spacing: 0.05em;
}

/* Expand hint icon on the small map preview (shows on hover) */
.hc-map-expand-hint {
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  background: rgba(0, 0, 0, 0.78);
  border: 1px solid rgba(212, 165, 74, 0.4);
  border-radius: 4px;
  color: #d4a54a;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s;
}

.hc-vendor-map:hover .hc-map-expand-hint {
  opacity: 1;
}

/* Lightbox for vendor maps */
.hc-map-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(5, 7, 12, 0.92);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  cursor: pointer;
  animation: hcLightboxFade 0.18s ease;
}

@keyframes hcLightboxFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.hc-map-lightbox-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  background: #0d1017;
  border: 1px solid rgba(212, 165, 74, 0.4);
  border-radius: 10px;
  overflow: hidden;
  cursor: default;
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
}

.hc-map-lightbox-header {
  padding: 12px 18px;
  border-bottom: 1px solid #1a1d25;
  flex: 0 0 auto;
}

.hc-map-lightbox-title {
  font-family: 'Cinzel', 'Georgia', serif;
  font-size: 16px;
  font-weight: 600;
  color: #d4a54a;
  letter-spacing: 0.02em;
}

.hc-map-lightbox-zone {
  font-size: 11px;
  color: #6b7280;
  margin-top: 3px;
  font-family: 'JetBrains Mono', 'Menlo', monospace;
  letter-spacing: 0.04em;
}

.hc-map-lightbox-stage {
  position: relative;
  background: #0a0d14;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hc-map-lightbox-stage img {
  display: block;
  max-width: 90vw;
  max-height: calc(90vh - 80px);
  width: auto;
  height: auto;
}

.hc-map-pin-lg {
  width: 26px;
  height: 26px;
  border-width: 3px;
  z-index: 5;
  box-shadow: 0 0 14px rgba(255, 68, 68, 0.85), 0 3px 6px rgba(0, 0, 0, 0.7);
}

.hc-map-pin-lg::after {
  top: 5px;
  left: 5px;
  width: 8px;
  height: 8px;
}

.hc-map-lightbox-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(212, 165, 74, 0.4);
  border-radius: 50%;
  color: #d4a54a;
  font-size: 14px;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.hc-map-lightbox-close:hover {
  background: rgba(212, 165, 74, 0.2);
  color: #f0d68a;
  transform: scale(1.08);
}

/* Quality badge on card */
.hc-card-quality {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Quality colors */
.hc-q-common { color: #9d9d9d; }
.hc-q-uncommon { color: #1eff00; }
.hc-q-rare { color: #0070dd; }
.hc-q-epic { color: #a335ee; }

.hc-qbg-common { background: rgba(157,157,157,0.15); color: #9d9d9d; }
.hc-qbg-uncommon { background: rgba(30,255,0,0.12); color: #1eff00; }
.hc-qbg-rare { background: rgba(0,112,221,0.15); color: #0070dd; }
.hc-qbg-epic { background: rgba(163,53,238,0.15); color: #a335ee; }

/* --- Pagination --- */
.hc-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px 20px;
  flex-shrink: 0;
  border-top: 1px solid #151920;
}

.hc-page-btn {
  min-width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  background: #141820;
  border: 1px solid #2a2d35;
  border-radius: 4px;
  color: #9ca3af;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}

.hc-page-btn:hover:not(.hc-page-active):not(.hc-page-dots):not(:disabled) {
  border-color: #c5993e;
  color: #d4a54a;
}

.hc-page-btn.hc-page-active {
  background: rgba(212, 165, 74, 0.15);
  border-color: #c5993e;
  color: #d4a54a;
  font-weight: 600;
}

.hc-page-btn.hc-page-dots {
  border: none;
  background: none;
  cursor: default;
  color: #4b5563;
  min-width: 24px;
}

.hc-page-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

/* --- Empty State --- */
.hc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.hc-empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.4;
}

.hc-empty-text {
  font-size: 15px;
  color: #6b7280;
  margin-bottom: 8px;
}

.hc-empty-sub {
  font-size: 13px;
  color: #4b5563;
}

/* --- Detail Panel Overlay --- */
.hc-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 500;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.hc-overlay.hc-open {
  opacity: 1;
  visibility: visible;
}

/* --- Detail Panel --- */
.hc-detail {
  position: fixed;
  top: 42px;   /* clear the fixed mega-nav so the header+star button are visible */
  right: 0;
  bottom: 0;
  width: 480px;
  max-width: 100vw;
  background: #111620;
  border-left: 1px solid #1a1d25;
  z-index: 510;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  overflow: hidden;
}

.hc-detail.hc-open {
  transform: translateX(0);
}

.hc-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid #1a1d25;
  flex-shrink: 0;
}

.hc-detail-title {
  font-family: 'Cinzel', 'Georgia', serif;
  font-weight: 600;
  font-size: 16px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 12px;
}

.hc-detail-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a1f2e;
  border: 1px solid #2a2d35;
  border-radius: 6px;
  color: #9ca3af;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}

.hc-detail-close:hover {
  border-color: #c5993e;
  color: #d4a54a;
}

/* 3D Viewer area */
.hc-viewer-area {
  width: 100%;
  aspect-ratio: 4/3;
  background: #0a0d14;
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
}

.hc-viewer-area canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.hc-viewer-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hc-viewer-fallback img {
  max-width: 96%;
  max-height: 96%;
  object-fit: contain;
  border-radius: 6px;
}

.hc-viewer-hint {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  color: rgba(255,255,255,0.25);
  pointer-events: none;
  white-space: nowrap;
}

.hc-viewer-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #555b66;
}

/* --- Detail Body Scroll --- */
.hc-detail-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.hc-detail-section {
  margin-bottom: 20px;
}

.hc-detail-section-title {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #555b66;
  margin-bottom: 8px;
}

.hc-detail-desc {
  font-size: 13px;
  color: #9ca3af;
  line-height: 1.6;
  font-style: italic;
}

/* Detail section row — grid on the left, corner tag on the right */
.hc-detail-section-row {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  justify-content: space-between;
}

.hc-detail-section-row .hc-detail-meta {
  flex: 1 1 auto;
  min-width: 0;
}

/* Detail metadata rows */
.hc-detail-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  font-size: 13px;
}

/* Corner tag (label centered above icon, used for Dyeable) */
.hc-detail-corner-tag {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding-top: 0;
}

.hc-corner-tag-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: #d4a54a;
  background: linear-gradient(180deg, rgba(212, 165, 74, 0.14) 0%, rgba(212, 165, 74, 0.06) 100%);
  border: 1px solid rgba(212, 165, 74, 0.35);
  border-radius: 4px;
  padding: 3px 12px;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.hc-detail-label {
  color: #555b66;
  font-size: 12px;
  white-space: nowrap;
}

.hc-detail-value {
  color: #c8ccd4;
}

/* Budget dots in detail */
.hc-budget-dots {
  color: #d4a54a;
  letter-spacing: 1px;
}

.hc-budget-dots .hc-budget-empty {
  color: #2a2d35;
}

/* Placement badges */
.hc-placement-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: #1a1f2e;
  border: 1px solid #2a2d35;
  border-radius: 4px;
  font-size: 11px;
  color: #9ca3af;
  margin-right: 6px;
}

.hc-placement-badge.hc-placement-yes {
  border-color: rgba(30, 255, 0, 0.2);
  color: #1eff00;
  background: rgba(30, 255, 0, 0.06);
}

/* Detail tags */
.hc-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.hc-tag-pill {
  padding: 3px 10px;
  background: #1a1f2e;
  border: 1px solid #2a2d35;
  border-radius: 12px;
  font-size: 11px;
  color: #9ca3af;
}

.hc-tag-pill .hc-tag-group {
  color: #4b5563;
  margin-right: 4px;
  font-size: 10px;
  text-transform: uppercase;
}

/* Detail color swatches */
.hc-detail-colors {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hc-color-swatch {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hc-color-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.1);
  flex-shrink: 0;
}

.hc-color-label {
  font-size: 12px;
  color: #9ca3af;
}

.hc-color-hex {
  font-size: 11px;
  color: #555b66;
  font-family: 'DM Sans', monospace;
}

/* Detail dye info */
.hc-dye-slots {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hc-dye-slot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: #1a1f2e;
  border: 1px solid #2a2d35;
  border-radius: 6px;
  font-size: 12px;
  color: #9ca3af;
}

.hc-dye-channel {
  font-size: 10px;
  font-weight: 600;
  color: #555b66;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Detail sources */
.hc-source-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hc-source-item {
  padding: 10px 12px;
  background: #1a1f2e;
  border: 1px solid #2a2d35;
  border-radius: 6px;
}

.hc-source-type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #c5993e;
  margin-bottom: 4px;
}

.hc-source-type-quest {
  color: #f4c452;
}

.hc-quest-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

.hc-source-detail {
  font-size: 12px;
  color: #9ca3af;
  line-height: 1.5;
}

.hc-source-detail span {
  color: #6b7280;
}

/* Dyeable indicator (icon-based) */
.hc-dyeable-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  cursor: default;
}

.hc-dyeable-icon {
  width: 70px;
  height: 70px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.6));
  transition: transform 0.2s;
  pointer-events: none;  /* Let parent wrap capture hover for tooltip */
}

.hc-dyeable-icon-wrap:hover .hc-dyeable-icon {
  transform: scale(1.06);
}

.hc-dyeable-icon-off {
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.6)) saturate(0.55) brightness(0.85);
  opacity: 0.82;
}

/* Custom CSS tooltip for dyeable wrap (replaces broken native title) */
.hc-dyeable-icon-wrap::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #1a1d24;
  color: #d4a54a;
  border: 1px solid #d4a54a;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s, transform 0.18s;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0,0,0,0.6);
}

.hc-dyeable-icon-wrap::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border: 6px solid transparent;
  border-top-color: #d4a54a;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s, transform 0.18s;
  z-index: 100;
}

.hc-dyeable-icon-wrap:hover::after,
.hc-dyeable-icon-wrap:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Slot count ring (only shown when slots > 1; max 3 slots in catalog) */
.hc-dyeable-count {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 28px;
  height: 28px;
  box-sizing: border-box;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #2a2030, #0f0c14);
  border: 2px solid #d4a54a;
  color: #f4d27a;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Cinzel', 'Georgia', serif;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.75), inset 0 0 5px rgba(212, 165, 74, 0.3);
  pointer-events: none;
}

/* Model info in detail */
.hc-model-info {
  font-size: 11px;
  color: #4b5563;
  font-family: monospace;
}


/* --- Loading State --- */
.hc-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  gap: 16px;
}

.hc-loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #2a2d35;
  border-top-color: #d4a54a;
  border-radius: 50%;
  animation: hc-spin 0.8s linear infinite;
}

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

.hc-loading-text {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  color: #6b7280;
  letter-spacing: 1px;
}

/* --- Sidebar mobile toggle --- */
.hc-sidebar-toggle {
  display: none;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  background: #141820;
  border: 1px solid #2a2d35;
  border-radius: 6px;
  color: #9ca3af;
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s;
}

.hc-sidebar-toggle:hover {
  border-color: #c5993e;
  color: #d4a54a;
}

/* --- Fade In Animation --- */
@keyframes hc-fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.hc-grid .hc-card {
  animation: hc-fadeIn 0.25s ease both;
}

/* Stagger first visible cards */
.hc-card:nth-child(1) { animation-delay: 0.02s; }
.hc-card:nth-child(2) { animation-delay: 0.04s; }
.hc-card:nth-child(3) { animation-delay: 0.06s; }
.hc-card:nth-child(4) { animation-delay: 0.08s; }
.hc-card:nth-child(5) { animation-delay: 0.10s; }
.hc-card:nth-child(6) { animation-delay: 0.12s; }
.hc-card:nth-child(7) { animation-delay: 0.14s; }
.hc-card:nth-child(8) { animation-delay: 0.16s; }

/* --- Responsive --- */
@media (max-width: 900px) {
  .hc-sidebar-toggle {
    display: flex;
  }

  .hc-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 400;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    box-shadow: none;
  }

  .hc-sidebar.hc-sidebar-open {
    transform: translateX(0);
    box-shadow: 8px 0 32px rgba(0,0,0,0.5);
  }

  .hc-title {
    font-size: 15px;
  }

  .hc-header {
    padding: 10px 14px;
    gap: 10px;
  }

  .hc-search-wrapper {
    flex: 1;
    min-width: 120px;
  }

  .hc-sort-group {
    display: none;
  }

  .hc-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
  }

  .hc-grid-scroll {
    padding: 12px;
  }
}

@media (max-width: 600px) {
  .hc-detail {
    width: 100vw;
    max-width: 100vw;
  }

  .hc-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
  }

  .hc-item-count {
    display: none;
  }

  .hc-card-body {
    padding: 8px 10px;
  }

  .hc-card-name {
    font-size: 12px;
  }
}

/* --- Sidebar overlay on mobile --- */
.hc-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 399;
}

@media (max-width: 900px) {
  .hc-sidebar-backdrop.hc-sidebar-open {
    display: block;
  }
}

/* --- Filter section special: dye colors grid --- */
.hc-dye-color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 4px;
}

.hc-dye-color-option {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s;
}

.hc-dye-color-option:hover {
  background: rgba(255,255,255,0.04);
}

.hc-dye-color-option.hc-active {
  background: rgba(212, 165, 74, 0.1);
}

.hc-dye-color-name {
  font-size: 11px;
  color: #9ca3af;
}

/* --- Budget filter visual --- */
.hc-budget-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px;
}

.hc-budget-option .hc-budget-dots {
  font-size: 12px;
}

/* --- "Show more" for long filter lists --- */
.hc-show-more {
  background: none;
  border: none;
  color: #c5993e;
  font-size: 11px;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  padding: 4px;
  margin-top: 4px;
  transition: color 0.15s;
}

.hc-show-more:hover {
  color: #d4a54a;
}

/* ============================================================
   Tab toggle (Items / Builds)
   ============================================================ */
.hc-tab-toggle {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: #0e1118;
  border: 1px solid #1a1d25;
  border-radius: 8px;
  flex-shrink: 0;
}

.hc-tab-btn {
  padding: 6px 16px;
  font-family: 'Cinzel', 'Georgia', serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7280;
  background: transparent;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.2s;
}

.hc-tab-btn:hover {
  color: #c8ccd4;
  background: rgba(212, 165, 74, 0.06);
}

.hc-tab-btn.active {
  color: #d4a54a;
  background: linear-gradient(135deg, rgba(212, 165, 74, 0.18), rgba(212, 165, 74, 0.08));
  box-shadow: inset 0 0 0 1px rgba(212, 165, 74, 0.3);
}

/* ============================================================
   Builds: List view
   ============================================================ */
.hc-content-builds {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px;
}

.hc-builds-view {
  max-width: 1400px;
  margin: 0 auto;
}

.hc-builds-head {
  margin-bottom: 24px;
}

.hc-builds-title {
  font-family: 'Cinzel', 'Georgia', serif;
  font-size: 22px;
  font-weight: 600;
  color: #d4a54a;
  letter-spacing: 0.04em;
}

.hc-builds-subtitle {
  font-size: 12px;
  color: #6b7280;
  margin-top: 4px;
}

.hc-builds-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 1200px) {
  .hc-builds-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .hc-builds-grid { grid-template-columns: 1fr; }
}

.hc-build-card {
  background: #0d1017;
  border: 1px solid #1a1d25;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.25s;
  display: flex;
  flex-direction: column;
}

.hc-build-card:hover {
  border-color: rgba(212, 165, 74, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(212, 165, 74, 0.15);
}

.hc-build-card-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0a0d14;
}

.hc-build-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}

.hc-build-card:hover .hc-build-card-thumb img {
  transform: scale(1.05);
}

.hc-build-card-duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  padding: 2px 8px;
  background: rgba(0, 0, 0, 0.85);
  color: #d4a54a;
  font-size: 10px;
  font-weight: 600;
  border-radius: 3px;
  letter-spacing: 0.04em;
}

.hc-build-card-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d4a54a;
  opacity: 0;
  transition: all 0.25s;
}

.hc-build-card:hover .hc-build-card-play {
  opacity: 1;
  background: rgba(212, 165, 74, 0.95);
  color: #0a0d14;
}

.hc-build-card-play svg {
  width: 24px;
  height: 24px;
  margin-left: 3px;
}

.hc-build-card-body {
  padding: 14px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.hc-build-card-title {
  font-family: 'Cinzel', 'Georgia', serif;
  font-size: 14px;
  font-weight: 600;
  color: #d4a54a;
  line-height: 1.35;
  margin-bottom: 6px;
}

.hc-build-card-meta {
  font-size: 11px;
  color: #6b7280;
  margin-bottom: 10px;
}

.hc-build-card-designer {
  color: #c8ccd4;
}

.hc-build-card-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: auto;
}

.hc-build-card-tag {
  padding: 2px 8px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9b8a4d;
  background: rgba(212, 165, 74, 0.08);
  border: 1px solid rgba(212, 165, 74, 0.18);
  border-radius: 3px;
}

/* ============================================================
   Builds: Detail view (Side-by-Side)
   ============================================================ */
.hc-build-detail {
  display: grid;
  grid-template-columns: minmax(320px, 40%) 1fr;
  gap: 32px;
  max-width: 1600px;
  margin: 0 auto;
  padding: 16px 8px 24px;
  align-items: start;
}

.hc-build-video-col {
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hc-build-back-btn {
  align-self: flex-start;
  padding: 6px 14px;
  background: transparent;
  border: 1px solid #1a1d25;
  border-radius: 6px;
  color: #6b7280;
  font-family: 'Cinzel', 'Georgia', serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all 0.2s;
}

.hc-build-back-btn:hover {
  color: #d4a54a;
  border-color: rgba(212, 165, 74, 0.4);
  background: rgba(212, 165, 74, 0.05);
}

.hc-build-video-iframe {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  border: 1px solid #1a1d25;
}

.hc-build-video-iframe iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.hc-build-meta {
  padding: 16px;
  background: #0d1017;
  border: 1px solid #1a1d25;
  border-radius: 10px;
}

.hc-build-meta-title {
  font-family: 'Cinzel', 'Georgia', serif;
  font-size: 18px;
  font-weight: 600;
  color: #d4a54a;
  line-height: 1.3;
}

.hc-build-meta-designer {
  font-size: 12px;
  color: #c8ccd4;
  margin-top: 4px;
}

.hc-build-meta-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 10px;
}

.hc-build-meta-tag {
  padding: 2px 8px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9b8a4d;
  background: rgba(212, 165, 74, 0.08);
  border: 1px solid rgba(212, 165, 74, 0.18);
  border-radius: 3px;
}

.hc-build-meta-desc {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.55;
  color: #c8ccd4;
}

.hc-build-meta-source {
  display: inline-block;
  margin-top: 12px;
  font-size: 10px;
  color: #6b7280;
  text-decoration: none;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}

.hc-build-meta-source:hover {
  color: #d4a54a;
}

.hc-build-info-col {
  min-width: 0;
}

.hc-build-items-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #1a1d25;
}

.hc-build-items-label {
  font-family: 'Cinzel', 'Georgia', serif;
  font-size: 14px;
  font-weight: 600;
  color: #d4a54a;
  letter-spacing: 0.04em;
}

.hc-build-items-count {
  font-size: 11px;
  color: #6b7280;
}

.hc-build-missing-note {
  color: #b87b34;
  margin-left: 4px;
}

.hc-build-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.hc-build-missing-footer {
  margin-top: 20px;
  padding: 12px;
  text-align: center;
  font-size: 11px;
  color: #6b7280;
  background: rgba(184, 123, 52, 0.04);
  border: 1px dashed rgba(184, 123, 52, 0.2);
  border-radius: 6px;
}

/* Mobile: stack video on top, items below */
@media (max-width: 900px) {
  .hc-build-detail {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 12px 8px;
  }
  .hc-build-video-col {
    position: relative;
    top: auto;
  }
  .hc-build-video-iframe {
    max-height: 300px;
  }
  .hc-build-items-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
  }
}


/* ════════════════════════════════════════════════════════════════════════
   COLLECTIONS (violet-themed user favorites tab, star button, picker modal)
   ════════════════════════════════════════════════════════════════════════ */

:root {
  --hc-violet:        #9b6fff;
  --hc-violet-soft:   rgba(155, 111, 255, 0.14);
  --hc-violet-mid:    rgba(155, 111, 255, 0.35);
  --hc-violet-bright: #c2a8ff;
  --hc-violet-deep:   #1a0f3d;
}

/* Auth modal (anonymous users) */
.auth-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(5, 7, 14, 0.88);
  backdrop-filter: blur(6px);
  z-index: 10001;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.auth-overlay.visible { display: flex; animation: authFade 0.22s ease; }
@keyframes authFade { from { opacity: 0; } to { opacity: 1; } }

.auth-modal {
  position: relative;
  background: linear-gradient(160deg, #1a1635 0%, #14112b 100%);
  border: 1px solid var(--hc-violet-mid);
  border-radius: 12px;
  padding: 34px 32px 28px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}

.auth-modal-icon {
  font-size: 36px;
  color: var(--hc-violet);
  line-height: 1;
  margin-bottom: 14px;
  filter: drop-shadow(0 4px 12px rgba(155, 111, 255, 0.5));
}

.auth-modal h3 {
  font-family: 'Cinzel', 'Georgia', serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--hc-violet-bright);
  margin: 0 0 10px;
  letter-spacing: 0.02em;
}

.auth-modal p {
  font-size: 13px;
  line-height: 1.55;
  color: #9ca3af;
  margin: 0 0 22px;
}

.auth-modal-btns {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.auth-modal-btns a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: 'Cinzel', 'Georgia', serif;
  text-decoration: none;
  transition: all 0.18s;
}

.auth-btn-login {
  background: transparent;
  border: 1px solid var(--hc-violet-mid);
  color: var(--hc-violet-bright);
}

.auth-btn-login:hover {
  background: var(--hc-violet-soft);
  border-color: var(--hc-violet);
}

.auth-btn-register {
  background: linear-gradient(135deg, var(--hc-violet) 0%, #7a4fd8 100%);
  color: white;
  border: 1px solid var(--hc-violet);
  box-shadow: 0 4px 14px rgba(155, 111, 255, 0.35);
}

.auth-btn-register:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(155, 111, 255, 0.5);
}

.auth-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  background: transparent;
  border: 1px solid rgba(155, 111, 255, 0.2);
  border-radius: 50%;
  color: var(--hc-violet-bright);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.auth-modal-close:hover {
  background: var(--hc-violet-soft);
  transform: rotate(90deg);
}

/* Star button in the detail panel header */
.hc-fav-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: auto;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  background: transparent;
  border: 1px solid rgba(155, 111, 255, 0.28);
  border-radius: 6px;
  color: rgba(155, 111, 255, 0.55);
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

/* Custom Favorites.png icon (replaces the unicode star) */
.hc-fav-star-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
  /* Inactive state: greyscale + dimmed */
  filter: grayscale(0.85) brightness(0.75) opacity(0.7);
  transition: filter 0.2s;
}

.hc-fav-star:hover {
  border-color: var(--hc-violet);
  background: var(--hc-violet-soft);
  transform: translateY(-1px);
}

.hc-fav-star:hover .hc-fav-star-icon {
  filter: grayscale(0) brightness(1) opacity(1)
          drop-shadow(0 0 6px rgba(155, 111, 255, 0.5));
}

.hc-fav-star.hc-fav-active {
  background: var(--hc-violet-soft);
  border-color: var(--hc-violet);
  box-shadow: 0 0 14px rgba(155, 111, 255, 0.35);
}

.hc-fav-star.hc-fav-active .hc-fav-star-icon {
  filter: grayscale(0) brightness(1.05) opacity(1)
          drop-shadow(0 0 8px rgba(194, 168, 255, 0.7));
}

.hc-fav-star-count {
  font-size: 10px;
  font-weight: 700;
  font-family: 'Cinzel', 'Georgia', serif;
  letter-spacing: 0.04em;
  color: var(--hc-violet-bright);
}

/* Collection Picker popover (anchored to the star button) */
.hc-picker-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: transparent;
}

.hc-picker {
  position: fixed;
  width: 320px;
  max-height: 440px;
  background: linear-gradient(165deg, #16132b 0%, #0f0c1f 100%);
  border: 1px solid var(--hc-violet-mid);
  border-radius: 10px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.7), 0 0 40px rgba(155, 111, 255, 0.15);
  z-index: 10001;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: pickerPop 0.2s ease;
}

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

.hc-picker-header {
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(155, 111, 255, 0.12);
  flex-shrink: 0;
}

.hc-picker-title {
  font-family: 'Cinzel', 'Georgia', serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--hc-violet-bright);
  margin-bottom: 3px;
}

.hc-picker-subtitle {
  font-size: 11px;
  color: #6b7280;
  line-height: 1.35;
}

.hc-picker-current {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(155, 111, 255, 0.08);
}

.hc-picker-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 5px 4px 10px;
  font-size: 11px;
  color: var(--hc-violet-bright);
  background: var(--hc-violet-soft);
  border: 1px solid var(--hc-violet-mid);
  border-radius: 20px;
  font-family: 'Cinzel', 'Georgia', serif;
}

.hc-picker-chip-remove {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: none;
  background: rgba(155, 111, 255, 0.15);
  color: var(--hc-violet-bright);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.hc-picker-chip-remove:hover {
  background: #e94c5c;
  color: white;
}

.hc-picker-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 6px 10px;
}

.hc-picker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
  font-size: 13px;
  color: #d1d5db;
  border: 1px solid transparent;
}

.hc-picker-row:hover {
  background: var(--hc-violet-soft);
  border-color: rgba(155, 111, 255, 0.25);
}

.hc-picker-row-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

.hc-picker-row-name {
  flex: 1;
  font-family: 'Cinzel', 'Georgia', serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.02em;
}

.hc-picker-row-count {
  font-size: 10px;
  color: #6b7280;
  font-family: 'JetBrains Mono', monospace;
}

.hc-picker-row-add {
  color: var(--hc-violet);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.hc-picker-row-already {
  opacity: 0.55;
}

.hc-picker-loose {
  border-top: 1px solid rgba(155, 111, 255, 0.08);
  border-bottom: 1px solid rgba(155, 111, 255, 0.08);
  margin: 4px 0;
  padding: 9px 10px;
  background: rgba(155, 111, 255, 0.04);
}

.hc-picker-create {
  flex-shrink: 0;
  padding: 10px 14px 14px;
  border-top: 1px solid rgba(155, 111, 255, 0.12);
  background: rgba(0, 0, 0, 0.25);
}

.hc-picker-create-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.hc-picker-create-input {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  background: #0a0818;
  border: 1px solid var(--hc-violet-mid);
  border-radius: 5px;
  color: var(--hc-violet-bright);
  font-size: 12px;
  font-family: 'Cinzel', 'Georgia', serif;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.hc-picker-create-btn {
  flex-shrink: 0;
  padding: 0 16px;
  background: linear-gradient(180deg, #9b6fff 0%, #6e44d8 100%);
  border: 1px solid rgba(155, 111, 255, 0.55);
  border-radius: 5px;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  font-family: 'Cinzel', 'Georgia', serif;
  transition: filter 0.18s, transform 0.08s, box-shadow 0.2s;
  box-shadow: 0 2px 8px rgba(80, 40, 200, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.hc-picker-create-btn:hover {
  filter: brightness(1.18);
  box-shadow: 0 3px 12px rgba(110, 68, 216, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.hc-picker-create-btn:active {
  transform: translateY(1px);
}

.hc-picker-create-input::placeholder {
  color: #555b80;
}

.hc-picker-create-input:focus {
  border-color: var(--hc-violet);
  box-shadow: 0 0 0 3px rgba(155, 111, 255, 0.15);
}

.hc-picker-create-hint {
  font-size: 10px;
  color: #6b7280;
  margin-top: 6px;
  text-align: center;
  letter-spacing: 0.04em;
}

/* Third tab: Collections */
.hc-tab-btn.hc-tab-collections {
  position: relative;
}

.hc-tab-btn.hc-tab-collections.active {
  border-color: var(--hc-violet);
  background: var(--hc-violet-soft);
  color: var(--hc-violet-bright);
  box-shadow: 0 0 14px rgba(155, 111, 255, 0.3);
}

.hc-tab-btn.hc-tab-collections:hover:not(.active) {
  border-color: rgba(155, 111, 255, 0.4);
  color: var(--hc-violet-bright);
}

.hc-tab-star {
  font-size: 12px;
  line-height: 1;
  margin-right: 3px;
  color: var(--hc-violet);
}

/* Collections tab — sidebar */
.hc-collections-view {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 0;
  height: 100%;
  overflow: hidden;
}

.hc-collections-sidebar {
  background: linear-gradient(180deg, rgba(26, 15, 61, 0.3) 0%, rgba(10, 8, 24, 0.5) 100%);
  border-right: 1px solid rgba(155, 111, 255, 0.12);
  padding: 18px 14px;
  overflow-y: auto;
}

.hc-collections-sidebar-title {
  font-family: 'Cinzel', 'Georgia', serif;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--hc-violet-bright);
  margin-bottom: 14px;
  padding: 0 6px;
}

.hc-collection-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 6px;
  cursor: pointer;
  color: #9ca3af;
  font-size: 13px;
  border: 1px solid transparent;
  transition: all 0.18s;
  margin-bottom: 3px;
}

.hc-collection-item:hover {
  background: var(--hc-violet-soft);
  color: var(--hc-violet-bright);
  border-color: rgba(155, 111, 255, 0.2);
}

.hc-collection-item.hc-active {
  background: var(--hc-violet-soft);
  color: var(--hc-violet-bright);
  border-color: var(--hc-violet);
  box-shadow: 0 2px 10px rgba(155, 111, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.hc-collection-item-icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.hc-collection-item-name {
  flex: 1;
  font-family: 'Cinzel', 'Georgia', serif;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hc-collection-item-count {
  font-size: 10px;
  color: #6b7280;
  font-family: 'JetBrains Mono', 'Menlo', monospace;
  flex-shrink: 0;
}

.hc-collection-item.hc-sub {
  margin-left: 14px;
  padding: 7px 10px;
  font-size: 12px;
  border-left: 2px solid rgba(155, 111, 255, 0.15);
  border-radius: 0 6px 6px 0;
}

.hc-collection-item.hc-all {
  margin-bottom: 10px;
  padding: 11px 10px;
  background: rgba(155, 111, 255, 0.05);
  border-color: rgba(155, 111, 255, 0.18);
}

.hc-collection-item-actions {
  display: none;
  gap: 4px;
  flex-shrink: 0;
}

.hc-collection-item:hover .hc-collection-item-actions {
  display: flex;
}

.hc-collection-item-action {
  width: 20px;
  height: 20px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--hc-violet-bright);
  cursor: pointer;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  opacity: 0.6;
  transition: all 0.15s;
}

.hc-collection-item-action:hover {
  background: var(--hc-violet-soft);
  opacity: 1;
}

.hc-new-collection-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 11px 10px;
  margin-top: 10px;
  background: transparent;
  border: 1px dashed var(--hc-violet-mid);
  border-radius: 6px;
  color: var(--hc-violet-bright);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-family: 'Cinzel', 'Georgia', serif;
  cursor: pointer;
  transition: all 0.2s;
}

.hc-new-collection-btn:hover {
  border-style: solid;
  background: var(--hc-violet-soft);
  border-color: var(--hc-violet);
}

/* Collections main area */
.hc-collections-main {
  overflow-y: auto;
  padding: 24px 28px 28px;
}

.hc-collection-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 18px;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(155, 111, 255, 0.15);
}

.hc-collection-header-main {
  flex: 1;
  min-width: 0;
}

.hc-collection-header-title {
  font-family: 'Cinzel', 'Georgia', serif;
  font-size: 26px;
  font-weight: 600;
  color: var(--hc-violet-bright);
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 10px;
}

.hc-collection-header-icon {
  font-size: 28px;
  line-height: 1;
}

.hc-collection-header-meta {
  font-size: 12px;
  color: #6b7280;
  margin-top: 6px;
  font-family: 'JetBrains Mono', 'Menlo', monospace;
  letter-spacing: 0.04em;
}

.hc-collection-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.hc-collection-action-btn {
  padding: 8px 14px;
  background: transparent;
  border: 1px solid rgba(155, 111, 255, 0.25);
  border-radius: 5px;
  color: var(--hc-violet-bright);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-family: 'Cinzel', 'Georgia', serif;
  cursor: pointer;
  transition: all 0.18s;
}

.hc-collection-action-btn:hover {
  background: var(--hc-violet-soft);
  border-color: var(--hc-violet);
  transform: translateY(-1px);
}

.hc-collection-action-btn.danger {
  color: #e94c5c;
  border-color: rgba(233, 76, 92, 0.3);
}

.hc-collection-action-btn.danger:hover {
  background: rgba(233, 76, 92, 0.1);
  border-color: #e94c5c;
}

.hc-collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}

/* Violet-outlined card variant for Collections tab */
.hc-collection-grid .hc-card {
  border-color: rgba(155, 111, 255, 0.18);
}

.hc-collection-grid .hc-card:hover {
  border-color: var(--hc-violet);
  box-shadow: 0 8px 30px rgba(155, 111, 255, 0.2);
}

/* Onboarding card for empty states / anonymous users */
.hc-onboarding {
  max-width: 640px;
  margin: 60px auto;
  padding: 40px 44px;
  background: linear-gradient(160deg, rgba(26, 15, 61, 0.6) 0%, rgba(15, 12, 31, 0.8) 100%);
  border: 1px solid var(--hc-violet-mid);
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), 0 0 60px rgba(155, 111, 255, 0.08);
}

.hc-onboarding-icon {
  font-size: 48px;
  color: var(--hc-violet);
  margin-bottom: 16px;
  filter: drop-shadow(0 6px 18px rgba(155, 111, 255, 0.5));
  line-height: 1;
}

.hc-onboarding h2 {
  font-family: 'Cinzel', 'Georgia', serif;
  font-size: 26px;
  font-weight: 600;
  color: var(--hc-violet-bright);
  margin: 0 0 8px;
  letter-spacing: 0.02em;
}

.hc-onboarding-subtitle {
  color: #9ca3af;
  font-size: 13px;
  line-height: 1.55;
  margin-bottom: 30px;
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
}

.hc-onboarding-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 30px;
}

.hc-onboarding-step {
  padding: 18px 14px;
  background: rgba(155, 111, 255, 0.04);
  border: 1px solid rgba(155, 111, 255, 0.14);
  border-radius: 8px;
}

.hc-onboarding-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--hc-violet-soft);
  border: 1.5px solid var(--hc-violet);
  color: var(--hc-violet-bright);
  font-family: 'Cinzel', 'Georgia', serif;
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 10px;
}

.hc-onboarding-step-title {
  font-family: 'Cinzel', 'Georgia', serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--hc-violet-bright);
  margin-bottom: 4px;
}

.hc-onboarding-step-text {
  font-size: 11px;
  color: #9ca3af;
  line-height: 1.5;
}

.hc-onboarding-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  background: linear-gradient(135deg, var(--hc-violet) 0%, #7a4fd8 100%);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  font-family: 'Cinzel', 'Georgia', serif;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(155, 111, 255, 0.35);
  transition: all 0.22s;
}

.hc-onboarding-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(155, 111, 255, 0.5);
}

.hc-onboarding-cta-secondary {
  background: transparent;
  color: var(--hc-violet-bright);
  border: 1px solid var(--hc-violet-mid);
  box-shadow: none;
  margin-left: 10px;
}

.hc-onboarding-cta-secondary:hover {
  background: var(--hc-violet-soft);
  border-color: var(--hc-violet);
  box-shadow: 0 4px 14px rgba(155, 111, 255, 0.2);
}

/* Compact empty state inside a collection grid */
.hc-collection-empty {
  padding: 60px 20px;
  text-align: center;
  color: #6b7280;
  font-size: 13px;
  font-style: italic;
  border: 1px dashed rgba(155, 111, 255, 0.15);
  border-radius: 10px;
  background: rgba(155, 111, 255, 0.02);
}

/* Small inline prompt above the "+ New collection" input in the sidebar */
.hc-new-collection-inline {
  padding: 6px 0 10px;
}

.hc-new-collection-inline input {
  width: 100%;
  padding: 8px 11px;
  background: #0a0818;
  border: 1px solid var(--hc-violet-mid);
  border-radius: 5px;
  color: var(--hc-violet-bright);
  font-size: 12px;
  font-family: 'Cinzel', 'Georgia', serif;
  box-sizing: border-box;
  outline: none;
}

.hc-new-collection-inline input:focus {
  border-color: var(--hc-violet);
  box-shadow: 0 0 0 3px rgba(155, 111, 255, 0.15);
}

/* Responsive */
@media (max-width: 900px) {
  .hc-collections-view {
    grid-template-columns: 1fr;
  }
  .hc-collections-sidebar {
    border-right: none;
    border-bottom: 1px solid rgba(155, 111, 255, 0.12);
    max-height: 200px;
  }
  .hc-onboarding-steps {
    grid-template-columns: 1fr;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   Save Build as Collection modal (Builds tab integration)
   ════════════════════════════════════════════════════════════════════════ */

.hc-save-build-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(5, 7, 14, 0.88);
  backdrop-filter: blur(6px);
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: authFade 0.22s ease;
}

.hc-save-build-modal {
  position: relative;
  background: linear-gradient(160deg, #1a1635 0%, #14112b 100%);
  border: 1px solid var(--hc-violet-mid);
  border-radius: 12px;
  padding: 30px 34px 26px;
  max-width: 460px;
  width: 100%;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.75);
}

.hc-save-build-modal h3 {
  font-family: 'Cinzel', 'Georgia', serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--hc-violet-bright);
  margin: 0 0 8px;
  text-align: center;
  letter-spacing: 0.02em;
}

.hc-save-build-modal p {
  text-align: center;
  color: #9ca3af;
  font-size: 12px;
  margin: 0 0 22px;
}

.hc-save-build-label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--hc-violet-bright);
  font-weight: 600;
  font-family: 'Cinzel', 'Georgia', serif;
  margin: 12px 0 6px;
}

.hc-save-build-input {
  width: 100%;
  padding: 10px 12px;
  background: #0a0818;
  border: 1px solid var(--hc-violet-mid);
  border-radius: 5px;
  color: var(--hc-violet-bright);
  font-size: 13px;
  font-family: 'Cinzel', 'Georgia', serif;
  box-sizing: border-box;
  outline: none;
}

.hc-save-build-input:focus {
  border-color: var(--hc-violet);
  box-shadow: 0 0 0 3px rgba(155, 111, 255, 0.15);
}

.hc-save-build-icons,
.hc-save-build-colors {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.hc-save-build-icon-btn {
  width: 40px;
  height: 40px;
  background: rgba(155, 111, 255, 0.04);
  border: 1px solid rgba(155, 111, 255, 0.18);
  border-radius: 6px;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.18s;
}

.hc-save-build-icon-btn:hover {
  background: var(--hc-violet-soft);
  border-color: var(--hc-violet-mid);
  transform: translateY(-1px);
}

.hc-save-build-icon-btn.hc-selected {
  background: var(--hc-violet-soft);
  border-color: var(--hc-violet);
  box-shadow: 0 0 12px rgba(155, 111, 255, 0.3);
}

.hc-save-build-color-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: all 0.18s;
  padding: 0;
}

.hc-save-build-color-btn:hover {
  transform: scale(1.1);
}

.hc-save-build-color-btn.hc-selected {
  border-color: #fff;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.hc-save-build-actions {
  display: flex;
  gap: 10px;
  margin-top: 24px;
  justify-content: flex-end;
}

.hc-save-build-btn {
  padding: 11px 22px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-family: 'Cinzel', 'Georgia', serif;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

.hc-save-build-btn.cancel {
  background: transparent;
  border: 1px solid var(--hc-violet-mid);
  color: var(--hc-violet-bright);
}

.hc-save-build-btn.cancel:hover {
  background: var(--hc-violet-soft);
}

.hc-save-build-btn.primary {
  background: linear-gradient(135deg, var(--hc-violet) 0%, #7a4fd8 100%);
  color: white;
  border: 1px solid var(--hc-violet);
  box-shadow: 0 4px 14px rgba(155, 111, 255, 0.35);
}

.hc-save-build-btn.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(155, 111, 255, 0.5);
}

.hc-save-build-btn.primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Save Build CTA button on the build detail view */
.hc-save-build-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: linear-gradient(180deg, rgba(155, 111, 255, 0.14) 0%, rgba(155, 111, 255, 0.06) 100%);
  border: 1px solid var(--hc-violet-mid);
  border-radius: 6px;
  color: var(--hc-violet-bright);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-family: 'Cinzel', 'Georgia', serif;
  cursor: pointer;
  transition: all 0.22s ease;
  margin-top: 14px;
}

.hc-save-build-cta:hover {
  background: linear-gradient(180deg, rgba(155, 111, 255, 0.24) 0%, rgba(155, 111, 255, 0.1) 100%);
  border-color: var(--hc-violet);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(155, 111, 255, 0.3);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CREATIVE HUB — Collections workspace redesign
   ═══════════════════════════════════════════════════════════════════════════ */

/* Tokens — scoped, do not collide with the catalog/builds tokens */
.cv-workspace {
  --ch-bg: #0a0518;
  --ch-surface: rgba(38, 22, 76, 0.55);
  --ch-surface-strong: rgba(38, 22, 76, 0.85);
  --ch-border: rgba(155, 111, 255, 0.18);
  --ch-border-strong: rgba(155, 111, 255, 0.45);
  --ch-violet: #9b6fff;
  --ch-violet-bright: #c2a8ff;
  --ch-violet-soft: #7a4fd8;
  --ch-glow: rgba(155, 111, 255, 0.35);
  --ch-text: #ede0ff;
  --ch-text-muted: rgba(237, 224, 255, 0.55);
  --ch-text-subtle: rgba(237, 224, 255, 0.35);
}

/* ─── Sidebar cover collage ─── */

.ch-cover {
  width: 36px;
  height: 36px;
  border-radius: 5px;
  overflow: hidden;
  flex-shrink: 0;
  display: grid;
  gap: 1px;
  background: rgba(155, 111, 255, 0.18);
  border: 1px solid var(--hc-violet-mid, rgba(122, 79, 216, 0.5));
}

.ch-cover-1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.ch-cover-2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.ch-cover-3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.ch-cover-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }

.ch-cover-cell {
  background: #0a0518;
  overflow: hidden;
}

.ch-cover-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* In a 3-cell collage, the first cell spans both columns of the top row */
.ch-cover-3 .ch-cover-cell:first-child {
  grid-column: 1 / span 2;
}

/* Restore proper alignment for hc-collection-item when it has a cover */
.hc-collection-item .ch-cover {
  margin-right: 2px;
}

/* ============================================================
   CV Workspace V2 — Creative Hub Workspace Redesign (2026-04-08)
   ============================================================ */

.cv-vision-strip {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 209, 0, 0.05);
  border-left: 3px solid #ffd100;
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 12px;
}

.cv-vision-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  color: #ffd100;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 9px;
}
.cv-vision-label-text {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  background: rgba(255, 209, 0, 0.12);
  border: 1px solid rgba(255, 209, 0, 0.35);
  border-radius: 3px;
  text-transform: uppercase;
}

.cv-vision-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.cv-vision-title-row { display: flex; align-items: baseline; gap: 8px; }
.cv-vision-title { font-size: 18px; font-weight: 700; color: #fff; font-family: 'Cinzel', serif; }
.cv-vision-meta { font-size: 11px; color: rgba(255, 255, 255, 0.4); }

.cv-vision-input-row { display: flex; align-items: center; gap: 8px; }
.cv-vision-input {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 1px dashed rgba(255, 209, 0, 0.25);
  color: rgba(255, 255, 255, 0.75);
  font-style: italic;
  font-size: 12px;
  padding: 2px 4px;
  outline: none;
  font-family: inherit;
}
.cv-vision-input::placeholder { color: rgba(255, 255, 255, 0.3); }
.cv-vision-input:focus { border-bottom-color: rgba(255, 209, 0, 0.7); }
.cv-vision-hint {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.cv-identity {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  flex-shrink: 0;
}
.cv-palette { display: flex; gap: 4px; }
.cv-swatch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
  padding: 0;
}
.cv-swatch:hover { transform: scale(1.1); border-color: #ffd100; }
.cv-dna-row { display: flex; gap: 4px; }
.cv-dna-chip {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.75);
  padding: 2px 9px;
  border-radius: 10px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  font-family: inherit;
}
.cv-dna-chip:hover { background: rgba(255, 209, 0, 0.12); border-color: rgba(255, 209, 0, 0.4); }

.cv-workspace { display: flex; flex-direction: column; gap: 12px; }

.cv-mode-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
}
.cv-mode-bar-left, .cv-mode-bar-right { display: flex; align-items: center; gap: 10px; }
.cv-mode-bar-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.5);
}
.cv-mode-bar-label b { color: rgba(255, 255, 255, 0.85); }

.cv-density-group {
  display: flex;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 6px;
  padding: 3px;
}
.cv-density-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 4px;
  background: transparent;
  border: none;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  font-family: inherit;
}
.cv-density-btn:hover { color: rgba(255, 255, 255, 0.8); }
.cv-density-active {
  background: rgba(255, 209, 0, 0.18);
  color: #ffd100;
}
.cv-density-icon {
  display: inline-grid;
  gap: 1px;
}
.cv-density-icon[data-density="normal"] { grid-template-columns: repeat(2, 4px); }
.cv-density-icon[data-density="compact"] { grid-template-columns: repeat(3, 3px); }
.cv-density-icon i {
  display: block;
  background: currentColor;
  width: 4px;
  height: 4px;
}
.cv-density-icon[data-density="compact"] i { width: 3px; height: 3px; }

.cv-curate-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  background: linear-gradient(135deg, #9b7fff, #6e4dff);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 2px 8px rgba(110, 77, 255, 0.4);
  transition: transform 0.15s, box-shadow 0.15s;
}
.cv-curate-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(110, 77, 255, 0.6); }
.cv-curate-arrow { font-size: 10px; }

.cv-view-mode { display: flex; flex-direction: column; gap: 10px; }
.cv-view-grid {
  display: grid;
  gap: 12px;
}
.cv-view-grid.cv-density-normal { grid-template-columns: repeat(5, 1fr); }
.cv-view-grid.cv-density-compact { grid-template-columns: repeat(8, 1fr); gap: 8px; }

.cv-view-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, background 0.15s;
}
.cv-view-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 209, 0, 0.4);
  background: rgba(255, 255, 255, 0.06);
}
.cv-view-card-thumb {
  aspect-ratio: 1;
  background: rgba(255, 255, 255, 0.03);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cv-view-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cv-view-card-meta { padding: 8px 10px; }
.cv-view-card-name {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cv-view-card-cat {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cv-density-compact .cv-view-card-meta { padding: 5px 7px; }
.cv-density-compact .cv-view-card-name { font-size: 9px; }
.cv-density-compact .cv-view-card-cat { font-size: 8px; }
/* ============================================================
   V4 Full Editor Mode — body.cv-editor-active hides site chrome
   so the .cv-workspace becomes a full-viewport editor shell.
   ============================================================ */
body.cv-editor-active .unav,
body.cv-editor-active .hc-header,
body.cv-editor-active .hc-collections-sidebar,
body.cv-editor-active .hc-sidebar,
body.cv-editor-active .hc-sidebar-backdrop {
  display: none !important;
}
body.cv-editor-active.hc-body {
  padding-top: 0 !important;
}
body.cv-editor-active .hc-app {
  height: 100vh !important;
}
body.cv-editor-active .hc-main,
body.cv-editor-active .hc-content,
body.cv-editor-active .hc-content-collections,
body.cv-editor-active .hc-collections-view,
body.cv-editor-active .hc-collections-main {
  height: 100vh !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
  grid-template-columns: 1fr !important;  /* kill the 260px sidebar column */
}
body.cv-editor-active .cv-workspace {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: #06041a;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}

/* ============================================================
   V4 Editor Shell — header + body (tool bar + right column)
   ============================================================ */
.cv-editor-shell {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: #06041a;
  color: #ede0ff;
  overflow: hidden;
}

/* Editor header (44px) */
.cv-editor-header {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 44px;
  flex-shrink: 0;
  padding: 0 14px;
  background: linear-gradient(180deg, rgba(28, 14, 56, 0.95) 0%, rgba(18, 8, 40, 0.95) 100%);
  border-bottom: 1px solid rgba(155, 127, 255, 0.20);
}
.cv-editor-exit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.82);
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}
.cv-editor-exit:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.26);
  color: #fff;
}
.cv-editor-exit svg { stroke: currentColor; }

.cv-editor-center {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}
.cv-editor-title-block {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-shrink: 0;
}
.cv-editor-title {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cv-editor-count {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cv-editor-vision-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  padding: 4px 10px;
  background: rgba(255, 209, 0, 0.04);
  border-left: 2px solid rgba(255, 209, 0, 0.55);
  border-radius: 3px;
}
.cv-editor-vision-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #ffd100;
  text-transform: uppercase;
  flex-shrink: 0;
}
.cv-editor-vision-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: rgba(255, 255, 255, 0.78);
  font-size: 11px;
  font-style: italic;
  font-family: inherit;
  padding: 2px 4px;
  min-width: 0;
}
.cv-editor-vision-input::placeholder { color: rgba(255, 255, 255, 0.28); }

.cv-editor-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.cv-editor-palette { display: flex; gap: 4px; }
.cv-editor-swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s, border-color 0.15s;
}
.cv-editor-swatch:hover { transform: scale(1.15); border-color: #ffd100; }
.cv-editor-dna { display: flex; gap: 4px; }
.cv-editor-chip {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.78);
  padding: 2px 9px;
  border-radius: 10px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  font-family: inherit;
}
.cv-editor-chip:hover {
  background: rgba(255, 209, 0, 0.14);
  border-color: rgba(255, 209, 0, 0.45);
  color: #ffe87f;
}

/* Editor body: left tool bar + right column (canvas + detail + elements) */
.cv-editor-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.cv-editor-right {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 12px 14px 12px 10px;
  gap: 10px;
}

/* ============================================================
   V4 Tool Bar — vertical 64px left rail with icon buttons
   ============================================================ */
.cv-tool-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 64px;
  flex-shrink: 0;
  padding: 12px 8px;
  gap: 8px;
  background: rgba(18, 10, 40, 0.75);
  border-right: 1px solid rgba(155, 127, 255, 0.18);
}
.cv-tool-btn {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.78);
  border-radius: 6px;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}
.cv-tool-btn svg { stroke: currentColor; }
.cv-tool-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.cv-tool-btn:disabled {
  opacity: 0.28;
  cursor: not-allowed;
}
.cv-tool-btn.cv-tool-active {
  background: rgba(255, 209, 0, 0.14);
  border-color: rgba(255, 209, 0, 0.55);
  color: #ffe87f;
  box-shadow: 0 0 0 1px rgba(255, 209, 0, 0.25) inset;
}
.cv-tool-divider {
  width: 32px;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
  margin: 2px 0;
}
.cv-tool-spacer {
  flex: 1;
}
.cv-tool-trash {
  background: rgba(255, 80, 80, 0.06);
  border: 1px dashed rgba(255, 80, 80, 0.38);
  color: rgba(255, 110, 110, 0.85);
}
.cv-tool-trash:hover {
  background: rgba(255, 80, 80, 0.14);
  border-color: rgba(255, 80, 80, 0.65);
  color: #ff8a8a;
}
.cv-tool-trash.cv-drag-over {
  background: rgba(255, 80, 80, 0.30);
  border-color: rgba(255, 80, 80, 0.90);
  border-style: solid;
  color: #fff;
  transform: scale(1.05);
}

/* ============================================================
   V4 Canvas — big violet panel, the primary work surface
   ============================================================ */
.cv-canvas {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  background: rgba(60, 40, 140, 0.16);
  border: 1px solid rgba(155, 127, 255, 0.38);
  border-radius: 8px;
  padding: 12px 14px 14px;
  overflow: hidden;
}
.cv-canvas-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  flex-shrink: 0;
}
.cv-canvas-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.cv-canvas-title-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: rgba(200, 175, 255, 0.95);
  text-transform: uppercase;
}
.cv-canvas-title-count {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.45);
  padding: 1px 8px;
  background: rgba(155, 127, 255, 0.14);
  border: 1px solid rgba(155, 127, 255, 0.28);
  border-radius: 10px;
}

.cv-canvas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px;
  border-radius: 4px;
  align-content: start;
}
.cv-canvas-grid.cv-drag-over {
  background: rgba(60, 40, 140, 0.30);
  outline: 2px dashed rgba(155, 127, 255, 0.60);
  outline-offset: -2px;
}
.cv-canvas-card {
  position: relative;
  aspect-ratio: 1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(155, 127, 255, 0.22);
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.cv-canvas-card:hover {
  transform: translateY(-2px);
  border-color: rgba(200, 175, 255, 0.70);
  box-shadow: 0 4px 14px rgba(60, 40, 140, 0.40);
}
.cv-canvas-card.cv-dragging { opacity: 0.4; }
.cv-canvas-card.cv-reorder-drop {
  border-color: rgba(255, 209, 0, 0.85);
  box-shadow: 0 0 0 2px rgba(255, 209, 0, 0.5);
}
.cv-canvas-card-thumb {
  position: absolute;
  inset: 0;
}
.cv-canvas-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cv-canvas-card-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 5px 7px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.82));
  color: #fff;
  font-size: 9px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cv-canvas-empty-hint {
  grid-column: 1 / -1;
  text-align: center;
  padding: 50px 20px;
  color: rgba(255, 255, 255, 0.35);
  font-size: 12px;
  font-style: italic;
}

/* Whisperer banner (top of canvas when diff is active) */
.cv-whisp-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(90, 127, 255, 0.10);
  border: 1px solid rgba(155, 127, 255, 0.52);
  border-radius: 6px;
  margin-bottom: 8px;
  flex-shrink: 0;
}
.cv-whisp-banner-loading {
  background: rgba(155, 127, 255, 0.08);
  border-color: rgba(155, 127, 255, 0.45);
}
.cv-whisp-banner-error {
  background: rgba(255, 80, 80, 0.10);
  border-color: rgba(255, 80, 80, 0.50);
}
.cv-whisp-banner-label {
  font-size: 11px;
  color: rgba(237, 224, 255, 0.88);
  font-weight: 500;
}
.cv-whisp-banner-label b { color: #ede0ff; font-weight: 700; }
.cv-whisp-count { margin: 0 2px; font-weight: 700; }
.cv-whisp-count-keep    { color: #ffd100; }
.cv-whisp-count-replace { color: #ff8080; }
.cv-whisp-count-add     { color: #7abfff; }
.cv-whisp-banner-actions { display: flex; gap: 6px; flex-shrink: 0; }
.cv-whisp-banner-btn {
  padding: 5px 11px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.88);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: background 0.15s, border-color 0.15s;
}
.cv-whisp-banner-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.32);
  color: #fff;
}
.cv-whisp-banner-accept {
  background: rgba(80, 200, 120, 0.18);
  border-color: rgba(80, 200, 120, 0.55);
  color: #7fe59c;
}
.cv-whisp-banner-accept:hover {
  background: rgba(80, 200, 120, 0.28);
  border-color: rgba(80, 200, 120, 0.85);
  color: #fff;
}
.cv-whisp-banner-revert {
  background: rgba(255, 80, 80, 0.12);
  border-color: rgba(255, 80, 80, 0.40);
  color: #ff9c9c;
}
.cv-whisp-banner-revert:hover {
  background: rgba(255, 80, 80, 0.22);
  border-color: rgba(255, 80, 80, 0.70);
  color: #fff;
}

/* ============================================================
   V4.1 Whisperer 3-column layout on the canvas
   Left  — Collection (squares, violet, normal aesthetic)
   Mid   — Replace pairs (square original + arrow + round rep)
   Right — Add rounds
   Interactions: all drag & drop. Drop a round card onto the
   collection grid → accept. Drop onto the Trash tool → reject.
   ============================================================ */
.cv-canvas-whisp {
  display: flex;
  flex: 1;
  min-height: 0;
  gap: 12px;
  padding: 4px 4px 2px;
  overflow: hidden;
}
.cv-whisp-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 10px 10px 12px;
  background: rgba(6, 4, 26, 0.35);
  border: 1px solid rgba(155, 127, 255, 0.20);
  border-radius: 6px;
}
.cv-whisp-col-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(200, 175, 255, 0.92);
  text-align: center;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(155, 127, 255, 0.18);
  flex-shrink: 0;
}
.cv-whisp-col-collection {
  flex: 1;
  min-width: 0;
  background: rgba(60, 40, 140, 0.14);
  border-color: rgba(155, 127, 255, 0.30);
}
.cv-whisp-col-collection .cv-whisp-canvas-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.cv-whisp-col-replace {
  width: 320px;
  flex-shrink: 0;
  background: rgba(255, 80, 80, 0.06);
  border-color: rgba(255, 120, 120, 0.30);
}
.cv-whisp-col-replace .cv-whisp-col-title {
  color: rgba(255, 170, 170, 0.95);
  border-bottom-color: rgba(255, 120, 120, 0.24);
}
.cv-whisp-col-add {
  width: 180px;
  flex-shrink: 0;
  background: rgba(90, 160, 255, 0.06);
  border-color: rgba(120, 180, 255, 0.30);
}
.cv-whisp-col-add .cv-whisp-col-title {
  color: rgba(170, 205, 255, 0.95);
  border-bottom-color: rgba(120, 180, 255, 0.24);
}
.cv-whisp-col-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 2px;
}
.cv-whisp-add-list {
  align-items: center;
}

/* Replace pair row: square original · arrow · round replacement */
.cv-whisp-pair {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 6px;
  background: rgba(255, 80, 80, 0.04);
  border: 1px solid rgba(255, 120, 120, 0.22);
  border-radius: 8px;
}
.cv-whisp-pair-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 170, 170, 0.55);
  flex-shrink: 0;
}
.cv-whisp-pair-arrow svg { stroke: currentColor; }
.cv-whisp-pair-orig.cv-canvas-card {
  width: 96px;
  height: 96px;
  flex-shrink: 0;
  aspect-ratio: unset;
  border-color: rgba(255, 90, 90, 0.85);
  box-shadow: 0 0 0 1px rgba(255, 90, 90, 0.25) inset;
}
.cv-whisp-pair-empty {
  flex: 1;
  padding: 14px 8px;
  font-size: 10px;
  color: rgba(255, 150, 150, 0.55);
  text-align: center;
  font-style: italic;
}

/* Round card (replacement and add items) */
.cv-whisp-round-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100px;
  flex-shrink: 0;
  cursor: grab;
  user-select: none;
}
.cv-whisp-round-card:active { cursor: grabbing; }
.cv-whisp-round-card.cv-dragging { opacity: 0.4; }
.cv-whisp-round-thumb {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(20, 12, 46, 0.65);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
  transition: transform 0.18s cubic-bezier(.22,.9,.29,1), border-color 0.18s, box-shadow 0.18s;
  flex-shrink: 0;
}
.cv-whisp-round-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cv-whisp-round-replace .cv-whisp-round-thumb {
  border: 2px solid rgba(155, 127, 255, 0.75);
}
.cv-whisp-round-add .cv-whisp-round-thumb {
  border: 2px dashed rgba(120, 180, 255, 0.80);
}
.cv-whisp-round-card:hover .cv-whisp-round-thumb {
  transform: translateY(-3px) scale(1.06);
  border-color: rgba(255, 209, 0, 0.90);
  box-shadow: 0 6px 18px rgba(155, 127, 255, 0.50);
}
.cv-whisp-round-name {
  text-align: center;
  color: rgba(220, 236, 255, 0.88);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.25;
  max-width: 100px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
   V4.4b Suggestions Panel — TRUE semicircle arched top
   The previous V4.4 bezier bump had horizontal tangents at the peak
   which meant the curve was NOT parallel to the preview circle (gap
   increased toward the middle). Replaced with a fixed-size inline SVG
   element that draws a pixel-accurate semicircle cubic bezier
   approximation, centered over the preview circle. The main container
   has its top border split into two flat segments via ::before/::after
   pseudo-elements.
   ============================================================ */
.cv-suggestions {
  position: relative;
  flex-shrink: 0;
  background: rgba(60, 160, 255, 0.07);
  background-image: none;
  border: 1px solid rgba(60, 160, 255, 0.42);
  border-top: none;  /* drawn as two flat segments + the arch SVG */
  border-radius: 0 0 12px 12px;
  padding: 14px 22px 24px;  /* no big top padding — arch lives above */
  margin-top: 120px;        /* room above for the arched dome */
  overflow: visible;
}

/* Left flat top border — line from the left edge to the arch start */
.cv-suggestions::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: calc(50% - 110px);
  height: 1px;
  background: rgba(60, 160, 255, 0.42);
  z-index: 1;
  pointer-events: none;
}

/* Right flat top border — line from the arch end to the right edge */
.cv-suggestions::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: calc(50% - 110px);
  height: 1px;
  background: rgba(60, 160, 255, 0.42);
  z-index: 1;
  pointer-events: none;
}

/* Arch dome — a fixed 224×114px SVG positioned so its (0,112) baseline
   meets the container's top border at y=0, and its peak rises to
   y=-110 (110px above the container). Pixel-accurate semicircle via
   two cubic bezier segments (k = 4/3 * (sqrt(2)-1) ≈ 0.5523). */
.cv-suggestions-arch {
  position: absolute;
  left: 50%;
  top: -112px;
  margin-left: -112px;
  width: 224px;
  height: 114px;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
  display: block;
}
.cv-suggestions-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  position: relative;
  z-index: 2;
}
.cv-suggestions-label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.cv-suggestions-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: rgba(180, 220, 255, 0.95);
  text-transform: uppercase;
  flex-shrink: 0;
}
.cv-suggestions-source {
  font-size: 10px;
  color: rgba(220, 236, 255, 0.85);
  padding: 3px 10px;
  background: rgba(60, 160, 255, 0.14);
  border: 1px solid rgba(60, 160, 255, 0.38);
  border-radius: 12px;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cv-suggestions-clear {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 11px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
}
.cv-suggestions-clear:hover { background: rgba(255, 255, 255, 0.35); }
/* Dice reroll button — icon only, circular, matches the aesthetic */
.cv-suggestions-reroll {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(60, 160, 255, 0.10);
  border: 1px solid rgba(60, 160, 255, 0.42);
  color: rgba(180, 220, 255, 0.90);
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.30);
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.18s cubic-bezier(.22,.9,.29,1);
  flex-shrink: 0;
}
.cv-suggestions-reroll svg { stroke: currentColor; }
.cv-suggestions-reroll:hover:not(:disabled) {
  background: rgba(60, 160, 255, 0.20);
  border-color: rgba(120, 200, 255, 0.75);
  color: #d4e7ff;
  transform: rotate(-12deg) scale(1.06);
}
.cv-suggestions-reroll:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  box-shadow: none;
}

/* ──────────────────────────────────────────────────────────────
   V4.3 Suggestions body — 4 rounds · absolute preview · 4 rounds
   Grid: 1fr · 280px reserve · 1fr. The preview lives in the middle
   column but is absolute-positioned so it can poke up into the arch.
   Small cards sit centered inside the flat lower portion.
   ────────────────────────────────────────────────────────────── */
.cv-suggestions-body {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 280px 1fr;
  gap: 32px;
  align-items: center;
  padding: 0 8px 4px;
  min-height: 170px;
  z-index: 2;
}
.cv-suggestions-half {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  align-items: center;
}
/* Explicit column placement — the absolute-positioned preview sits in
   the reserved middle column, which means auto-flow would put the right
   half into col 2. Pin both halves to their correct columns. */
.cv-suggestions-half-left { grid-column: 1; }
.cv-suggestions-half-right { grid-column: 3; }
/* Hide the original 8-column .cv-stage grid that renderCvStage produces —
   we pull its children out in JS and drop them into the two halves above. */
.cv-suggestions-body > .cv-stage { display: none; }

/* Round small cards (each half contains four of these) */
.cv-suggestions-body .cv-stage-card {
  background: transparent;
  border: none;
  aspect-ratio: unset;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  overflow: visible;
  padding: 0;
  cursor: pointer;
}
.cv-suggestions-body .cv-stage-card:hover {
  transform: none;
  border-color: transparent;
}
.cv-suggestions-body .cv-stage-card-thumb {
  position: relative;
  width: 100%;
  max-width: 130px;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(130, 180, 240, 0.42);
  background: rgba(20, 12, 46, 0.55);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.38);
  transition: transform 0.22s cubic-bezier(.22,.9,.29,1), border-color 0.18s, box-shadow 0.22s;
  inset: auto;
  flex-shrink: 0;
}
.cv-suggestions-body .cv-stage-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cv-suggestions-body .cv-stage-card:hover .cv-stage-card-thumb {
  transform: translateY(-3px) scale(1.06);
  border-color: rgba(255, 225, 120, 0.90);
  box-shadow: 0 10px 26px rgba(120, 140, 255, 0.45);
}
.cv-suggestions-body .cv-stage-card-name {
  position: static;
  background: none;
  padding: 0;
  text-align: center;
  color: rgba(220, 236, 255, 0.85);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.25;
  max-width: 130px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  overflow: hidden;
  text-overflow: initial;
  transition: color 0.18s;
}

/* Clean CIRCULAR selection ring — no rectangular border on the card wrapper,
   the highlight lives on the thumb itself so it's always perfectly centered
   around the circle. */
.cv-suggestions-body .cv-stage-card.cv-previewed .cv-stage-card-thumb {
  border-color: #ffd100;
  box-shadow:
    0 0 0 3px rgba(255, 209, 0, 0.32),
    0 10px 24px rgba(255, 209, 0, 0.30),
    0 3px 10px rgba(0, 0, 0, 0.4);
  transform: translateY(-2px) scale(1.04);
}
.cv-suggestions-body .cv-stage-card.cv-previewed .cv-stage-card-name {
  color: #ffe680;
  font-weight: 600;
}
.cv-suggestions-body .cv-stage-card.cv-stage-locked .cv-stage-card-thumb {
  border-color: rgba(255, 209, 0, 0.85);
  box-shadow: 0 0 0 2px rgba(255, 209, 0, 0.30), 0 4px 14px rgba(0, 0, 0, 0.4);
}
.cv-suggestions-body .cv-stage-card-actions {
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.75);
  border-radius: 10px;
  padding: 2px;
}
.cv-suggestions-body .cv-stage-empty-slot {
  border-radius: 50%;
  aspect-ratio: 1;
  max-width: 130px;
  background: transparent;
  border: 1px dashed rgba(120, 170, 230, 0.18);
}
.cv-suggestions-body .cv-stage-skeleton {
  border-radius: 50%;
  aspect-ratio: 1;
  max-width: 130px;
}

/* ── V4.4b Preview circle (9th, middle, 180px, gold ring) ──
   Absolute positioned so it's concentric with the arch dome above the
   container. Circle center sits at container y=0 (same as arch center),
   so the radial gap between preview (r=90) and arch (r=110) is a
   constant ~20px all the way around the curve. Measured body top is at
   y=62 inside the panel (containing block is .cv-suggestions-body, not
   the outer panel), so top = -90 - 62 = -152. A further -3 accounts
   for the 3px gold border so the RING center (not the thumb bounding
   box center) matches the arch center. Final value: -155. */
.cv-suggestions-preview {
  position: absolute;
  left: 50%;
  top: -155px;
  transform: translateX(-50%);
  width: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 3;
  pointer-events: none;  /* children re-enable */
}
.cv-suggestions-preview > * { pointer-events: auto; position: relative; z-index: 1; }
.cv-suggestions-preview::before {
  /* Warm radial halo centered behind the big thumb */
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 209, 0, 0.14) 0%,
    rgba(255, 209, 0, 0.06) 42%,
    transparent 72%);
  pointer-events: none;
  z-index: 0;
}
.cv-suggestions-preview-thumb {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, #2a1f3d, #150c22);
  border: 3px solid #ffd100;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35) inset,
    0 0 38px rgba(255, 209, 0, 0.32),
    0 12px 38px rgba(0, 0, 0, 0.55);
  flex-shrink: 0;
  transition: transform 0.28s cubic-bezier(.22,.9,.29,1), box-shadow 0.28s;
}
.cv-suggestions-preview-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cv-suggestions-preview-empty .cv-suggestions-preview-thumb {
  border-style: dashed;
  border-color: rgba(255, 209, 0, 0.45);
  box-shadow: 0 0 22px rgba(255, 209, 0, 0.10);
}
.cv-suggestions-preview-name {
  font-family: 'Cinzel', serif;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  max-width: 240px;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 4px;
}
.cv-suggestions-preview-cat {
  font-size: 10px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.50);
  text-align: center;
  text-transform: uppercase;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cv-suggestions-preview-hint {
  font-size: 11px;
  font-style: italic;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 4px;
}
.cv-suggestions-preview-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.cv-preview-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(255, 209, 0, 0.10);
  border: 1px solid rgba(255, 209, 0, 0.42);
  color: rgba(255, 225, 120, 0.95);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s, transform 0.18s cubic-bezier(.22,.9,.29,1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.cv-preview-btn svg { stroke: currentColor; }
.cv-preview-btn:hover:not(:disabled) {
  background: rgba(255, 209, 0, 0.22);
  border-color: #ffd100;
  color: #fff1a6;
  transform: translateY(-2px);
}
.cv-preview-btn:disabled { opacity: 0.5; cursor: wait; }
.cv-preview-btn-add {
  background: rgba(80, 200, 120, 0.12);
  border-color: rgba(80, 200, 120, 0.55);
  color: rgba(150, 230, 175, 0.95);
}
.cv-preview-btn-add:hover:not(:disabled) {
  background: rgba(80, 200, 120, 0.22);
  border-color: rgba(120, 230, 160, 0.90);
  color: #b7f2c8;
}
.cv-preview-btn-remove {
  background: rgba(255, 80, 80, 0.10);
  border-color: rgba(255, 80, 80, 0.50);
  color: rgba(255, 160, 160, 0.95);
}
.cv-preview-btn-remove:hover:not(:disabled) {
  background: rgba(255, 80, 80, 0.22);
  border-color: rgba(255, 130, 130, 0.85);
  color: #ffc7c7;
}

/* ============================================================
   V4.5 — Modular trash-on-drag for the Suggestions preview
   Any CV drag arms body.cv-trash-armed. When armed:
   - Preview thumb goes from gold to red
   - Item thumbnail fades out; trash icon fades in
   - Name, category and action buttons fade away
   - Halo switches from warm gold to red
   Dropping the dragged item on the thumb deletes/rejects it
   based on the drag source (tray | stage | whisp-*).
   ============================================================ */

/* Halo: swap warm gold glow for red when armed */
body.cv-trash-armed .cv-suggestions-preview::before {
  background: radial-gradient(circle,
    rgba(255, 64, 64, 0.18) 0%,
    rgba(255, 64, 64, 0.08) 42%,
    transparent 72%);
}

/* Thumb: red ring + dark red interior */
body.cv-trash-armed .cv-suggestions-preview-thumb {
  border-color: #ff4444;
  background: linear-gradient(135deg, #3d1616, #1f0808);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35) inset,
    0 0 44px rgba(255, 68, 68, 0.42),
    0 12px 38px rgba(0, 0, 0, 0.55);
  cursor: copy;
}

/* Intensify when the drag is directly over the thumb (drop is imminent) */
.cv-suggestions-preview-thumb.cv-trash-over {
  border-color: #ff6a6a !important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35) inset,
    0 0 60px rgba(255, 80, 80, 0.78),
    0 0 0 3px rgba(255, 80, 80, 0.22),
    0 12px 38px rgba(0, 0, 0, 0.55) !important;
  transform: scale(1.05);
}

/* Hide the thumbnail image while armed so the trash icon stands alone */
body.cv-trash-armed .cv-suggestions-preview-thumb img {
  opacity: 0;
  transition: opacity 0.18s ease;
}

/* Trash icon overlay — lives inside the thumb, hidden by default */
.cv-suggestions-preview-trash-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 74px;
  height: 74px;
  transform: translate(-50%, -50%) scale(0.7);
  color: #ffb3b3;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.28s cubic-bezier(.22,.9,.29,1);
  z-index: 2;
  filter: drop-shadow(0 2px 8px rgba(255, 60, 60, 0.55));
}
.cv-suggestions-preview-trash-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body.cv-trash-armed .cv-suggestions-preview-trash-icon {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.cv-suggestions-preview-thumb.cv-trash-over .cv-suggestions-preview-trash-icon,
body.cv-trash-armed .cv-suggestions-preview-thumb.cv-trash-over + .cv-suggestions-preview-trash-icon {
  color: #fff;
  transform: translate(-50%, -50%) scale(1.12);
}

/* Collapse labels/actions while armed so the circle reads as a pure target */
body.cv-trash-armed .cv-suggestions-preview-name,
body.cv-trash-armed .cv-suggestions-preview-cat,
body.cv-trash-armed .cv-suggestions-preview-hint,
body.cv-trash-armed .cv-suggestions-preview-actions,
body.cv-trash-armed .cv-color-inline-readout,
body.cv-trash-armed .cv-color-inline-range,
body.cv-trash-armed .cv-color-inline-actions,
body.cv-trash-armed .cv-color-inline-chips {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

/* ============================================================
   V4.9 — Side drop circles (Similar Item / Similar Color)
   They flank the big preview circle during any CV drag and act as
   alternative drop targets that re-anchor the suggestions on the
   dropped item (by similarity or by primary color). Hidden by
   default — fade in when body.cv-trash-armed.
   ============================================================ */
.cv-suggestions-side-drop {
  position: absolute;
  top: -65px;             /* center at panel y=0, same as the preview center */
  width: 130px;
  height: 130px;
  border-radius: 50%;
  box-sizing: border-box;
  background: linear-gradient(135deg, rgba(40, 28, 80, 0.92), rgba(20, 12, 40, 0.92));
  border: 2px dashed rgba(255, 255, 255, 0.32);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: rgba(220, 220, 240, 0.92);
  text-align: center;
  cursor: copy;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.86);
  transition: opacity 0.18s ease, transform 0.28s cubic-bezier(.22,.9,.29,1),
              border-color 0.18s, box-shadow 0.22s, background 0.18s;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}
.cv-suggestions-side-drop-left {
  left: calc(50% - 270px);   /* preview center − (110 + gap 30 + 65) = −205 from center, edge at −270 */
}
.cv-suggestions-side-drop-right {
  left: calc(50% + 140px);   /* mirror: preview center + 110 + 30 = +140 from center, edge at +140 */
}

/* Visible & interactive only during a CV drag */
body.cv-trash-armed .cv-suggestions-side-drop {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5),
              0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}

/* Hover (drag-over) state — brighten and slightly scale up */
.cv-suggestions-side-drop.cv-side-drop-over {
  border-color: #ffd100 !important;
  background: linear-gradient(135deg, rgba(60, 42, 100, 0.96), rgba(28, 16, 56, 0.96));
  color: #fff5c0;
  transform: scale(1.06);
  box-shadow: 0 14px 38px rgba(255, 209, 0, 0.32),
              0 0 0 1px rgba(255, 209, 0, 0.45) inset !important;
}

.cv-suggestions-side-drop-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.22s cubic-bezier(.22,.9,.29,1);
}
.cv-suggestions-side-drop-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
}
.cv-suggestions-side-drop.cv-side-drop-over .cv-suggestions-side-drop-icon {
  transform: scale(1.12);
}

.cv-suggestions-side-drop-label {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  line-height: 1.2;
  max-width: 110px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

/* ============================================================
   V5.0 — Inline detail mode
   The Suggestions panel collapses its header / 8 small circles /
   side drops while detailModeActive is true. The preview wrap stays
   centered above the panel; the action row beneath the thumb gets
   View 3D / Close pills; the body of the panel is filled with the
   item's full detail sections (description, info, tags, colors,
   sources, model).
   ============================================================ */

/* V5.5 — Hide header + side drops. The header is fully removed in
   detail mode (display:none) so the body can reclaim the 48px of
   vertical space for actual content. The wrap is repositioned
   (`.cv-suggestions-preview-detail { top: -107px }` below) to
   compensate so the preview circle stays at the exact same
   absolute position as in normal mode. */
body.cv-detail-mode-active .cv-suggestions-header {
  display: none !important;
}
body.cv-detail-mode-active .cv-suggestions-side-drop {
  display: none !important;
}

/* V5.5 — ABSOLUTE GEOMETRY LOCK.
   The panel's border-box height is pinned to exactly 261px (the
   normal-mode value) so detail-mode content can never push the
   container up or down. In detail mode the top padding is
   squeezed to 6px (vs 14 in normal mode) because there's no
   header to leave room for — this minimises the empty gap between
   the panel top edge and the first container. The body grows to
   fill the full inner area (261 - padTop 6 - padBottom 24 = 231px). */
body.cv-detail-mode-active .cv-suggestions {
  box-sizing: border-box;
  height: 261px;
  min-height: 261px;
  max-height: 261px;
  padding: 6px 22px 24px;
}
body.cv-detail-mode-active .cv-suggestions-body {
  height: 231px;
  min-height: 231px;
  max-height: 231px;
  overflow: visible;
  padding-top: 0;
  padding-bottom: 0;
}

/* V5.5 — Detail wrap top is recalculated for the squeezed layout.
   Normal mode: body top = panel top + 62, wrap top = -155 → thumb
   top = panel + 62 - 155 = panel - 93 (thumb center at panel y=0).
   Detail mode: body top = panel top + 6 (padTop only, no header),
   so wrap top = -6 - 93 = -99 keeps the thumb center at the same
   panel y=0. The preview circle doesn't move a pixel. */
.cv-suggestions-preview-detail {
  width: 280px;
  top: -99px;
}

/* V5.5 — Each half block is a 2-column flexbox that fills the
   entire body height (223 px - 4px*2 padding = 215 px inner).
   A JS bin-packer (_cvOptimizeDetailHalfLayout in catalog.js)
   measures the natural height of every section and distributes
   them into two `.cv-detail-col` wrappers so each column's height
   is independent — a tall Sources in col1 cannot push sections in
   col2 down. The dynamic map fitter then grows/shrinks map images
   in each column so maps use all the spare space. */
body.cv-detail-mode-active .cv-suggestions-detail-half {
  align-self: stretch;
  min-width: 0;
  flex: 1 1 0;
  /* Compact vertical padding — the body is already using every
     available pixel and we don't want a big gap at the top edge. */
  padding: 2px 14px 2px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  /* V5.5 — cols stretch to full half height. Sections inside each
     col use flex: 1 0 auto so they grow equally to fill the col
     vertically. Combined with the map bin-search this fills both
     "has maps" and "no maps" items cleanly without leaving big
     blue empty strips at the bottom. */
  align-items: stretch;
  height: 231px;
  max-height: 231px;
  overflow: hidden;
}
body.cv-detail-mode-active .cv-suggestions-detail-half .cv-detail-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Cap at full body height (minus 4 px vertical padding) so the
     binary-search map fitter has a known budget to grow into. */
  max-height: 227px;
}
body.cv-detail-mode-active .cv-suggestions-detail-half-left {
  padding-right: 22px;
}
body.cv-detail-mode-active .cv-suggestions-detail-half-right {
  padding-left: 22px;
}
/* V5.5 — Sections grow to fill their column vertically with
   flex: 1 0 auto. Base is their natural content height, so no
   section ever gets squeezed below its content; any extra space
   in the column is distributed equally between sections.
   This turns "small section with big empty blue space below"
   into "medium sections that fill the column", which looks
   visually balanced for items with low content density. */
body.cv-detail-mode-active .cv-suggestions-detail-half .cv-detail-section {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 8px 11px 9px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  flex: 1 0 auto;
}
body.cv-detail-mode-active .cv-suggestions-detail-half .cv-detail-section-title {
  font-size: 8.5px;
  letter-spacing: 0.14em;
  margin-bottom: 6px;
}
body.cv-detail-mode-active .cv-suggestions-detail-half .cv-detail-meta {
  gap: 4px 12px;
  font-size: 10.5px;
}
body.cv-detail-mode-active .cv-suggestions-detail-half .cv-detail-label {
  font-size: 8.5px;
}
body.cv-detail-mode-active .cv-suggestions-detail-half .cv-detail-value {
  font-size: 10.5px;
}
body.cv-detail-mode-active .cv-suggestions-detail-half .cv-detail-tag-pill {
  padding: 2px 8px;
  font-size: 9.5px;
}
body.cv-detail-mode-active .cv-suggestions-detail-half .cv-detail-tag-group {
  font-size: 7.5px;
}

/* V5.5 — Colors: tight horizontal chips. Each swatch is only as wide
   as its color circle + 7-char hex string, wrapping to a new row if
   there are more than fit. No full-width swatches — that wasted
   massive horizontal space. */
body.cv-detail-mode-active .cv-suggestions-detail-half .cv-detail-colors {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px 6px;
  align-items: flex-start;
  align-content: flex-start;
}
body.cv-detail-mode-active .cv-suggestions-detail-half .cv-detail-color-swatch {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  padding: 2px 8px 2px 4px;
  gap: 5px;
}
body.cv-detail-mode-active .cv-suggestions-detail-half .cv-detail-color-circle {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}
body.cv-detail-mode-active .cv-suggestions-detail-half .cv-detail-color-hex {
  font-size: 9.5px;
  white-space: nowrap;
}

/* V5.5 — Sources card: stack vendor row + tiny map pairs vertically.
   Maps are aggressively shrunk (max-height 38) so even items with
   2-3 vendor sources fit inside the 170px half. Users who need a
   readable map can click to open the lightbox. */
body.cv-detail-mode-active .cv-suggestions-detail-half .cv-detail-sources {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: stretch;
}
body.cv-detail-mode-active .cv-suggestions-detail-half .cv-detail-source-row {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 9.5px;
  line-height: 1.2;
}
body.cv-detail-mode-active .cv-suggestions-detail-half .cv-detail-source-type {
  font-size: 7.5px;
  min-width: 40px;
}
/* V5.5 — Map container has an EXPLICIT height (set by JS per-item
   via binary search) so the bin-packer measurements are stable
   regardless of image load timing. The img fills 100% of the
   container and object-fit: cover handles aspect ratio. */
body.cv-detail-mode-active .cv-suggestions-detail-half .cv-detail-map {
  flex: 0 0 auto;
  width: 100%;
  margin-top: 0;
  min-width: 0;
  max-width: 100%;
  height: 80px;  /* default; overridden by JS */
}
body.cv-detail-mode-active .cv-suggestions-detail-half .cv-detail-map img {
  max-height: none;
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
}
body.cv-detail-mode-active .cv-suggestions-detail-half .cv-detail-model-info {
  font-size: 9.5px;
}
body.cv-detail-mode-active .cv-suggestions-detail-half .cv-detail-desc {
  font-size: 11px;
  line-height: 1.35;
}

/* Action row in detail mode — wider Cinzel pills */
.cv-detail-actions {
  margin-top: 10px;
  gap: 10px;
  align-items: center;
}
.cv-detail-actions .cv-preview-btn {
  width: auto;
  min-width: 76px;
  height: 30px;
  padding: 0 18px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 999px;
  font-family: 'Cinzel', serif;
}
.cv-detail-3d-btn {
  background: rgba(60, 160, 255, 0.18);
  border-color: rgba(120, 200, 255, 0.62);
  color: #d9ecff;
}
.cv-detail-3d-btn:hover:not(:disabled) {
  background: rgba(60, 160, 255, 0.32);
  border-color: rgba(160, 220, 255, 0.92);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(60, 160, 255, 0.35);
}
.cv-detail-stop-3d-btn {
  background: rgba(255, 209, 0, 0.18);
  border-color: rgba(255, 209, 0, 0.55);
  color: #fff5c0;
}
.cv-detail-stop-3d-btn:hover:not(:disabled) {
  background: rgba(255, 209, 0, 0.30);
  border-color: #ffd100;
  color: #ffffff;
  transform: translateY(-1px);
}
.cv-detail-close-btn {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.78);
}
.cv-detail-close-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.40);
  color: #ffffff;
  transform: translateY(-1px);
}

/* 3D viewer thumb — strip the static image background while WASM owns it */
.cv-suggestions-preview-thumb.cv-detail-3d-thumb {
  background: #000;
  position: relative;
}
.cv-detail-3d-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(220, 230, 255, 0.75);
  pointer-events: none;
}
.cv-suggestions-preview-thumb.cv-detail-3d-thumb canvas {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  border-radius: 50%;
}
/* V5.1 — hide the WASM viewer's "Drag to rotate · Right-click pan ·…"
   instructional overlay inside the round curator-mode thumb. The hint
   is clipped by the border-radius and looks broken. */
.cv-suggestions-preview-thumb.cv-detail-3d-thumb .hc-viewer-hint {
  display: none !important;
}

/* V5.3 — Detail section base — actual visual styling (background,
   border, padding, font sizes) is set inside the half-block scope
   above so it never bleeds into other contexts. */
.cv-detail-section { /* placeholder selector */ }
.cv-detail-section-sources { /* placeholder selector */ }
.cv-detail-section-title {
  font-family: 'Cinzel', serif;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 209, 0, 0.78);
  margin-bottom: 8px;
}
.cv-detail-desc {
  font-family: 'Raleway', sans-serif;
  font-size: 12.5px;
  color: rgba(232, 232, 245, 0.92);
  line-height: 1.45;
  font-style: italic;
}
.cv-detail-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 16px;
  font-size: 11px;
  align-items: center;
}
.cv-detail-label {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(220, 220, 240, 0.55);
}
.cv-detail-value {
  font-family: 'Raleway', sans-serif;
  font-size: 11.5px;
  color: rgba(245, 245, 255, 0.95);
  display: flex;
  align-items: center;
  gap: 8px;
}
.cv-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cv-detail-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-family: 'DM Sans', sans-serif;
  font-size: 10.5px;
  color: rgba(232, 232, 245, 0.92);
}
.cv-detail-tag-group {
  font-size: 8.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 209, 0, 0.78);
}
.cv-detail-colors {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cv-detail-color-swatch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.cv-detail-color-circle {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18) inset;
}
.cv-detail-color-hex {
  font-family: 'DM Sans', monospace;
  font-size: 10px;
  color: rgba(232, 232, 245, 0.85);
}
.cv-detail-sources {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cv-detail-source-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: 'Raleway', sans-serif;
  font-size: 11px;
  color: rgba(232, 232, 245, 0.92);
}
.cv-detail-source-type {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255, 209, 0, 0.85);
  flex-shrink: 0;
  min-width: 70px;
}
.cv-detail-model-info {
  font-family: 'DM Sans', monospace;
  font-size: 10px;
  color: rgba(220, 220, 240, 0.65);
  letter-spacing: 0.04em;
}

/* V5.1 — Vendor location maps inside the Sources card */
.cv-detail-map {
  position: relative;
  margin-top: 8px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  cursor: pointer;
  transition: border-color 0.18s, transform 0.22s cubic-bezier(.22,.9,.29,1);
  background: #000;
}
.cv-detail-map:hover {
  border-color: rgba(255, 209, 0, 0.65);
  transform: translateY(-1px);
}
.cv-detail-map img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 160px;
  object-fit: cover;
}
.cv-detail-map-pin {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ff3030;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 8px rgba(255, 60, 60, 0.7);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.cv-detail-map-coords {
  position: absolute;
  bottom: 4px;
  left: 6px;
  font-family: 'DM Sans', monospace;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(0, 0, 0, 0.55);
  padding: 1px 5px;
  border-radius: 3px;
  pointer-events: none;
}
.cv-detail-map-expand {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(0, 0, 0, 0.55);
  padding: 1px 5px;
  border-radius: 3px;
  pointer-events: none;
}

/* ============================================================
   V4.6 — Inline color picker inside the preview thumb
   The thumb hosts a 180×180 HSL canvas clipped to the circle by the
   thumb's border-radius. The SVG overlay holds the draggable cursor.
   Below the thumb, the normal name/cat/actions slots are re-used for
   a hex readout, strictness slider and Clear/Apply buttons.
   ============================================================ */

/* V4.8 — color mode enlarges the preview thumb so the wheel reaches further
   toward the V4.4c arch outline (thumb outer radius 110, gap to arch ≈ 0–4px),
   and the picker can be visually grasped at a glance. We override only in
   color mode so the normal item preview stays at its original 180px size. */
.cv-suggestions-preview-colorpick {
  /* Recalc: body offsetParent top is at panel y=62, new thumb radius = 110
     (border-box), so wrap.top = -110 - 62 = -172 to keep thumb center at
     panel y=0 (concentric with the V4.4c arch). */
  top: -172px;
}
.cv-suggestions-preview-colorpick .cv-suggestions-preview-thumb {
  box-sizing: border-box;
  width: 220px;
  height: 220px;
  background: #000;
  cursor: crosshair;
}

/* Canvas fills the 180px thumb exactly and is clipped to the circle. */
.cv-color-inline-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  border-radius: 50%;
}

/* SVG overlay sits above the canvas, owns all pointer events */
.cv-color-inline-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: auto;
  touch-action: none;
  border-radius: 50%;
}
.cv-color-inline-overlay circle {
  transition: cx 0.05s linear, cy 0.05s linear;
}

/* Chips row — 1 chip per picked color + Add button when < 2 */
.cv-color-inline-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  max-width: 280px;
}
.cv-color-inline-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-family: 'DM Sans', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.18s cubic-bezier(.22,.9,.29,1);
}
.cv-color-inline-chip:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.28);
}
.cv-color-inline-chip-active {
  background: rgba(255, 209, 0, 0.14);
  border-color: rgba(255, 209, 0, 0.60);
  color: #fff3b8;
  transform: translateY(-1px);
  box-shadow: 0 2px 10px rgba(255, 209, 0, 0.18);
}
.cv-color-inline-chip-swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55) inset;
  flex-shrink: 0;
}
.cv-color-inline-chip-num {
  font-size: 9px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.65);
  min-width: 10px;
  text-align: right;
}
.cv-color-inline-chip-active .cv-color-inline-chip-num {
  color: rgba(255, 243, 184, 0.95);
}
.cv-color-inline-chip-hex {
  font-family: 'DM Sans', 'Courier New', monospace;
  font-size: 10px;
  letter-spacing: 0.03em;
}
.cv-color-inline-chip-rm {
  width: 14px;
  height: 14px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.75);
  font-size: 11px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  font-family: inherit;
}
.cv-color-inline-chip-rm:hover {
  background: rgba(255, 80, 80, 0.65);
  color: #fff;
}
.cv-color-inline-chip-add {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(255, 255, 255, 0.24);
  color: rgba(255, 255, 255, 0.72);
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.18s cubic-bezier(.22,.9,.29,1);
}
.cv-color-inline-chip-add:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
  transform: translateY(-1px);
}
.cv-color-inline-chip-add span {
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

/* Tolerance halo on the wheel — CSS is just for the smooth transition */
.cv-color-inline-halo {
  transition: r 0.08s linear;
}

/* Strictness slider — narrow row replacing the category line */
.cv-color-inline-range {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  max-width: 240px;
  width: 100%;
  justify-content: center;
}
.cv-color-inline-range-label {
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 600;
  flex-shrink: 0;
}
.cv-color-inline-slider {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  min-width: 80px;
  max-width: 120px;
  height: 3px;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}
.cv-color-inline-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #ffd100;
  border: 1px solid rgba(0, 0, 0, 0.45);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22) inset, 0 2px 6px rgba(0, 0, 0, 0.55);
  cursor: grab;
}
.cv-color-inline-slider::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #ffd100;
  border: 1px solid rgba(0, 0, 0, 0.45);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22) inset, 0 2px 6px rgba(0, 0, 0, 0.55);
  cursor: grab;
}
.cv-color-inline-range-val {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  min-width: 18px;
  text-align: right;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 600;
}

/* Cancel | Reset | Done — three pill buttons (Cancel is icon-only). */
.cv-color-inline-actions {
  margin-top: 8px;
  gap: 8px;
  align-items: center;
}
.cv-color-inline-actions .cv-preview-btn {
  width: auto;
  min-width: 64px;
  height: 28px;
  padding: 0 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
  font-family: 'Cinzel', serif;
}
.cv-color-inline-cancel {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px;
  padding: 0 !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  font-family: inherit !important;
  letter-spacing: 0 !important;
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.55);
}
.cv-color-inline-cancel:hover:not(:disabled) {
  background: rgba(255, 80, 80, 0.16);
  border-color: rgba(255, 120, 120, 0.55);
  color: #ffc7c7;
  transform: translateY(-1px);
}
.cv-color-inline-done {
  background: rgba(255, 209, 0, 0.22);
  border-color: rgba(255, 209, 0, 0.72);
  color: #fff5c0;
  box-shadow: 0 2px 12px rgba(255, 209, 0, 0.20);
}
.cv-color-inline-done:hover:not(:disabled) {
  background: rgba(255, 209, 0, 0.34);
  border-color: #ffd100;
  color: #fffce0;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(255, 209, 0, 0.30);
}
.cv-color-inline-reset {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.75);
}
.cv-color-inline-reset:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.40);
  color: #fff;
  transform: translateY(-1px);
}

/* ============================================================
   V4 Color Field Popover — 2D hue × lightness gradient
   ============================================================ */
.cv-color-field-pop {
  position: fixed;
  z-index: 9999;
  background: #0f0828;
  border: 1px solid rgba(155, 127, 255, 0.52);
  border-radius: 8px;
  padding: 12px 14px 14px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.70), 0 0 0 1px rgba(155, 127, 255, 0.14) inset;
  width: 272px;
  color: #ede0ff;
  font-family: inherit;
}
.cv-color-field-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #d9c8ff;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.cv-color-field-sub {
  font-size: 10px;
  color: rgba(237, 224, 255, 0.55);
  margin-bottom: 8px;
}
.cv-color-field-canvas-wrap {
  position: relative;
  width: 240px;
  height: 160px;
  border-radius: 4px;
  overflow: hidden;
  background: #000;
}
.cv-color-field-canvas {
  display: block;
  width: 240px;
  height: 160px;
}
.cv-color-field-overlay {
  position: absolute;
  inset: 0;
  width: 240px;
  height: 160px;
  cursor: crosshair;
  touch-action: none;
}
.cv-color-field-readout {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 11px;
}
.cv-color-field-swatch {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.30);
  flex-shrink: 0;
}
.cv-color-field-hex {
  font-family: 'DM Sans', monospace;
  color: rgba(255, 255, 255, 0.88);
  font-size: 11px;
}
.cv-color-field-range {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.65);
}
.cv-color-field-slider {
  flex: 1;
  accent-color: #9b6fff;
}
.cv-color-field-range-val {
  min-width: 22px;
  text-align: right;
  font-family: 'DM Sans', monospace;
  color: rgba(255, 255, 255, 0.85);
}
.cv-color-field-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  justify-content: flex-end;
}
.cv-color-field-clear,
.cv-color-field-apply {
  padding: 6px 13px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  font-family: inherit;
  border: 1px solid;
  transition: background 0.15s, border-color 0.15s;
}
.cv-color-field-clear {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.75);
}
.cv-color-field-clear:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.cv-color-field-apply {
  background: rgba(155, 111, 255, 0.22);
  border-color: rgba(155, 111, 255, 0.65);
  color: #c2a8ff;
}
.cv-color-field-apply:hover {
  background: rgba(155, 111, 255, 0.38);
  border-color: rgba(155, 111, 255, 0.90);
  color: #fff;
}

/* ============================================================
   V4 Whisperer prompt popover + Vibe popover (small, anchored)
   ============================================================ */
.cv-whisp-prompt-pop,
.cv-vibe-pop {
  position: fixed;
  z-index: 9999;
  width: 280px;
  background: #0f0828;
  border: 1px solid rgba(155, 127, 255, 0.52);
  border-radius: 8px;
  padding: 12px 14px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.70);
  color: #ede0ff;
  font-family: inherit;
}
.cv-whisp-prompt-title,
.cv-vibe-pop-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #d9c8ff;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.cv-whisp-prompt-sub,
.cv-vibe-pop-sub {
  font-size: 10px;
  color: rgba(237, 224, 255, 0.55);
  margin-bottom: 8px;
  line-height: 1.4;
}
.cv-whisp-prompt-row,
.cv-vibe-pop-row {
  display: flex;
  gap: 6px;
}
.cv-whisp-prompt-input,
.cv-vibe-pop-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(155, 127, 255, 0.40);
  color: rgba(255, 255, 255, 0.92);
  border-radius: 5px;
  padding: 8px 11px;
  font-size: 12px;
  outline: none;
  font-family: inherit;
  min-width: 0;
}
.cv-whisp-prompt-input::placeholder,
.cv-vibe-pop-input::placeholder { color: rgba(255, 255, 255, 0.32); font-style: italic; }
.cv-whisp-prompt-input:focus,
.cv-vibe-pop-input:focus {
  border-color: rgba(155, 127, 255, 0.80);
  background: rgba(255, 255, 255, 0.10);
}
.cv-whisp-prompt-submit,
.cv-vibe-pop-submit {
  padding: 8px 14px;
  background: linear-gradient(135deg, #9b7fff, #6e4dff);
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(110, 77, 255, 0.4);
}
.cv-whisp-prompt-submit:hover,
.cv-vibe-pop-submit:hover {
  box-shadow: 0 4px 12px rgba(110, 77, 255, 0.6);
}

/* ============================================================
   V4 Expand Collections slide-out panel
   ============================================================ */
.cv-expand-wrap {
  position: fixed;
  inset: 0;
  z-index: 9500;
  pointer-events: none;
}
.cv-expand-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 4, 26, 0.62);
  backdrop-filter: blur(2px);
  pointer-events: auto;
  animation: cv-fade-in 0.18s ease;
}
.cv-expand-pane {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 320px;
  background: linear-gradient(180deg, rgba(22, 10, 48, 0.98), rgba(14, 6, 34, 0.98));
  border-right: 1px solid rgba(155, 127, 255, 0.42);
  box-shadow: 16px 0 48px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  animation: cv-slide-in 0.22s cubic-bezier(.22,.9,.29,1);
}
@keyframes cv-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes cv-slide-in { from { transform: translateX(-100%); } to { transform: translateX(0); } }
.cv-expand-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(155, 127, 255, 0.18);
  flex-shrink: 0;
}
.cv-expand-title {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 700;
  color: #d9c8ff;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.cv-expand-close {
  width: 26px;
  height: 26px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.75);
  border-radius: 4px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
}
.cv-expand-close:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.cv-expand-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cv-expand-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid transparent;
  color: rgba(237, 224, 255, 0.75);
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  border-radius: 5px;
  text-align: left;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.cv-expand-item:hover {
  background: rgba(155, 127, 255, 0.12);
  border-color: rgba(155, 127, 255, 0.32);
  color: #fff;
}
.cv-expand-item.cv-expand-active {
  background: rgba(155, 127, 255, 0.22);
  border-color: rgba(155, 127, 255, 0.60);
  color: #fff;
}
.cv-expand-item-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cv-expand-item-count {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.45);
  padding: 1px 7px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 9px;
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
   CV Stage — 8-card candidate grid (Task 5)
   --------------------------------------------------------------------------- */
.cv-stage {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  min-height: 200px;
}
.cv-stage-card {
  position: relative;
  aspect-ratio: 1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, background 0.15s;
}
.cv-stage-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 209, 0, 0.4);
}
.cv-stage-card-thumb {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cv-stage-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cv-stage-card-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px 10px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.85));
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cv-stage-card-actions {
  position: absolute;
  top: 6px;
  left: 6px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s;
}
.cv-stage-card:hover .cv-stage-card-actions { opacity: 1; }
.cv-stage-action {
  width: 24px;
  height: 24px;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
}
.cv-stage-action:hover { background: rgba(0, 0, 0, 0.9); border-color: rgba(255, 255, 255, 0.4); }
.cv-stage-action:disabled { opacity: 0.5; cursor: wait; }

.cv-stage-locked {
  border-color: rgba(255, 209, 0, 0.7) !important;
  box-shadow: 0 0 0 2px rgba(255, 209, 0, 0.25);
}
.cv-stage-skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.04) 100%);
  background-size: 200% 100%;
  animation: cv-skeleton 1.4s ease infinite;
  border-color: transparent;
  cursor: default;
}
@keyframes cv-skeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.cv-stage-empty-slot { background: transparent; border-style: dashed; cursor: default; }
.cv-stage-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
  font-size: 12px;
}
.cv-stage-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(60, 160, 255, 0.09);
  border: 1px solid rgba(60, 160, 255, 0.26);
  border-radius: 6px;
  padding: 9px 14px;
}
.cv-stage-toolbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: rgba(220, 236, 255, 0.80);
}
.cv-stage-toolbar-status b { color: #ffd100; }
.cv-stage-toolbar-sep { color: rgba(255, 255, 255, 0.3); }
.cv-stage-bulk-add {
  background: rgba(255, 209, 0, 0.15);
  border: 1px solid rgba(255, 209, 0, 0.5);
  color: #ffd100;
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cv-stage-bulk-add:hover { background: rgba(255, 209, 0, 0.25); }
.cv-stage-bulk-add:disabled { opacity: 0.5; cursor: wait; }
.cv-stage-reroll {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #5aa0ff, #3c74e0);
  border: none;
  color: #fff;
  padding: 7px 18px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  box-shadow: 0 2px 8px rgba(60, 116, 224, 0.4);
  transition: box-shadow 0.15s, transform 0.15s;
}
.cv-stage-reroll:hover:not(:disabled) {
  box-shadow: 0 4px 14px rgba(60, 116, 224, 0.65);
  transform: translateY(-1px);
}
.cv-stage-reroll:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }

/* V4.2: the old .cv-detail-strip and .cv-detail-* rules are deleted.
   The big middle circle in the Suggestions panel is the preview surface. */

.cv-dragging { opacity: 0.4; }

/* ---- Empty state (empty collection in View mode) ---- */
.cv-empty {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cv-empty-inner {
  text-align: center;
  padding: 60px 30px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(255, 255, 255, 0.10);
  border-radius: 10px;
}
.cv-empty-headline {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
  font-family: 'Cinzel', serif;
}
.cv-empty-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 24px;
}
.cv-empty-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}
.cv-empty-browse {
  padding: 9px 20px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.85);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.cv-empty-browse:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }

/* ═══════════════════════════════════════════════════════════════════════
   V5.6 — Custom community build items
   ═══════════════════════════════════════════════════════════════════════ */

/* Gold pill badge on every thumbnail variant. Top-left corner, never
   interactive (pointer-events:none), sits above the thumb image but
   below the quality badge. */
.hc-custom-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 2px 8px;
  font-family: 'Cinzel', serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #ffd100;
  background: rgba(10, 5, 28, 0.82);
  border: 1px solid rgba(255, 209, 0, 0.55);
  border-radius: 999px;
  text-transform: uppercase;
  z-index: 5;
  pointer-events: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  white-space: nowrap;
}
.hc-custom-badge-sm { font-size: 7px; padding: 1px 6px; letter-spacing: 0.12em; }
.hc-custom-badge-xs {
  /* For round stage cards (overflow:hidden clips the corner), anchor the
     badge at the bottom-centre inside the circle so it's always fully
     visible. Small, readable, doesn't cover the thumbnail. */
  font-size: 6.5px;
  padding: 1px 6px;
  letter-spacing: 0.1em;
  top: auto;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  background: rgba(10, 5, 28, 0.92);
}
.hc-custom-badge-ring {
  /* For the big round preview circles — sits at the top-centre of the
     circle instead of the corner so the gold pill frames the build name. */
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
}

/* Ensure every card thumb wrap is position:relative so the absolute badge
   anchors correctly. Re-declared defensively. */
.hc-card-thumb,
.cv-view-card-thumb,
.cv-stage-card-thumb,
.cv-canvas-card-thumb,
.cv-suggestions-preview-thumb {
  position: relative;
}

/* ── Custom detail half — shared layout ─────────────────────────── */
.cv-custom-detail-half {
  /* The default renderCvDetailHalfLeft uses the bin-packer. For custom
     items we override back to a simple flex-column so the items list
     can scroll inside its allotted space. */
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 6px 8px 4px;
  box-sizing: border-box;
  overflow: hidden;  /* panel lock — nothing escapes */
}

.cv-custom-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex: none;
}
.cv-custom-detail-title {
  font-family: 'Cinzel', serif;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(255, 209, 0, 0.82);
  text-transform: uppercase;
}
.cv-custom-type-pill {
  font-family: 'Cinzel', serif;
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(200, 175, 255, 0.85);
  background: rgba(120, 80, 220, 0.2);
  border: 1px solid rgba(155, 111, 255, 0.4);
  border-radius: 999px;
  padding: 1px 7px;
  text-transform: uppercase;
  white-space: nowrap;
}
.cv-custom-video-pill {
  color: #ffd100;
  background: rgba(255, 209, 0, 0.1);
  border-color: rgba(255, 209, 0, 0.5);
}

/* V5.7 — compact meta bar for the left half. Replaces the old header. */
.cv-custom-meta-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 4px 2px 6px;
  border-bottom: 1px solid rgba(120, 80, 220, 0.18);
  margin-bottom: 2px;
}
.cv-custom-meta-cost,
.cv-custom-meta-count {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 2px 6px;
  background: rgba(255, 209, 0, 0.08);
  border: 1px solid rgba(255, 209, 0, 0.35);
  border-radius: 5px;
  line-height: 1;
}
.cv-custom-meta-count {
  background: rgba(120, 80, 220, 0.16);
  border-color: rgba(155, 111, 255, 0.4);
}
.cv-custom-meta-cost img {
  width: 11px;
  height: 11px;
  align-self: center;
}
.cv-custom-meta-cost-num,
.cv-custom-meta-count-num {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 700;
  color: #ffd100;
  letter-spacing: 0.02em;
}
.cv-custom-meta-count-num {
  color: rgba(220, 200, 255, 0.95);
}
.cv-custom-meta-cost-label,
.cv-custom-meta-count-label {
  font-family: 'Cinzel', serif;
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(255, 209, 0, 0.55);
  text-transform: uppercase;
}
.cv-custom-meta-count-label {
  color: rgba(200, 175, 255, 0.6);
}
.cv-custom-meta-type {
  margin-left: auto;
}

/* V5.7 — credit footer: creator name + social badges + source link */
.cv-custom-credit {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 1 1 auto;
  min-width: 0;
}
.cv-custom-credit-by {
  font-family: 'Cinzel', serif;
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: rgba(200, 175, 255, 0.5);
  text-transform: uppercase;
}
.cv-custom-credit-name {
  font-size: 10px;
  font-weight: 600;
  color: rgba(230, 215, 255, 0.95);
  font-family: 'DM Sans', sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
  min-width: 0;
}
a.cv-custom-credit-name:hover {
  color: #ffd100;
  text-decoration: underline;
}
.cv-custom-credit-social {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 14px;
  border-radius: 3px;
  font-family: 'Cinzel', serif;
  font-size: 6.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: transform 0.12s, filter 0.12s;
}
.cv-custom-credit-social:hover {
  transform: translateY(-1px);
  filter: brightness(1.2);
}
.cv-custom-credit-youtube {
  background: #ff0000;
  color: #fff;
}
.cv-custom-credit-twitch {
  background: #9146ff;
  color: #fff;
}

/* ── Left half: scrollable items-used list ─────────────────────── */
.cv-custom-detail-items {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(155, 111, 255, 0.35) transparent;
}
.cv-custom-detail-items::-webkit-scrollbar { width: 5px; }
.cv-custom-detail-items::-webkit-scrollbar-thumb { background: rgba(155, 111, 255, 0.35); border-radius: 4px; }
.cv-custom-detail-items::-webkit-scrollbar-track { background: transparent; }

.cv-custom-detail-item-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px;
  border-radius: 4px;
  background: rgba(20, 12, 40, 0.35);
  border: 1px solid rgba(120, 80, 220, 0.08);
  flex: none;
  min-height: 24px;
  transition: background 0.15s, border-color 0.15s;
}
.cv-custom-detail-item-matched { cursor: pointer; }
.cv-custom-detail-item-matched:hover {
  background: rgba(40, 24, 72, 0.55);
  border-color: rgba(155, 111, 255, 0.35);
}

.cv-custom-detail-item-thumb {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 3px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cv-custom-detail-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cv-custom-detail-item-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 9.5px;
  color: rgba(230, 215, 255, 0.92);
  font-family: 'DM Sans', sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cv-custom-detail-item-qty {
  flex: none;
  font-size: 9px;
  color: rgba(200, 175, 255, 0.65);
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
}
.cv-custom-detail-item-budget {
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 9px;
  color: rgba(255, 209, 0, 0.85);
  font-weight: 600;
}
.cv-custom-detail-item-budget img {
  width: 10px;
  height: 10px;
  display: block;
}

.cv-custom-detail-footer {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding-top: 5px;
  margin-top: 3px;
  border-top: 1px solid rgba(120, 80, 220, 0.18);
  min-height: 20px;
}
.cv-custom-detail-meta {
  font-size: 8.5px;
  color: rgba(200, 175, 255, 0.55);
  font-style: italic;
}
.cv-custom-detail-source {
  font-size: 9px;
  color: rgba(255, 209, 0, 0.85);
  text-decoration: none;
  font-family: 'Cinzel', serif;
  font-weight: 600;
  letter-spacing: 0.06em;
  flex: none;
}
.cv-custom-detail-source:hover { text-decoration: underline; }
.cv-custom-detail-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: rgba(200, 175, 255, 0.45);
  font-style: italic;
}

/* ── Right half: slideshow ─────────────────────────────────────── */
.cv-custom-slideshow-stage {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(120, 80, 220, 0.2);
  min-height: 0;
}
.cv-custom-slideshow-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: zoom-in;
  display: block;
}
.cv-custom-slideshow-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 40px;
  border: none;
  background: rgba(10, 5, 28, 0.7);
  color: rgba(230, 215, 255, 0.9);
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
  z-index: 3;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  line-height: 1;
  padding: 0;
}
.cv-custom-slideshow-arrow:hover {
  background: rgba(20, 10, 48, 0.9);
  color: #ffd100;
}
.cv-custom-slideshow-arrow-prev { left: 4px; }
.cv-custom-slideshow-arrow-next { right: 4px; }
.cv-custom-slideshow-play {
  position: absolute;
  bottom: 6px;
  right: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  background: rgba(10, 5, 28, 0.82);
  border: 1px solid rgba(255, 209, 0, 0.55);
  color: #ffd100;
  font-family: 'Cinzel', serif;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 4;
  transition: background 0.15s, transform 0.15s;
}
.cv-custom-slideshow-play:hover {
  background: rgba(20, 10, 48, 0.95);
  transform: scale(1.05);
}
.cv-custom-play-icon { font-size: 9px; }
.cv-custom-slideshow-counter {
  flex: none;
  text-align: center;
  font-size: 8.5px;
  color: rgba(200, 175, 255, 0.55);
  font-family: 'DM Sans', sans-serif;
  letter-spacing: 0.05em;
  margin-top: 2px;
}
.cv-custom-detail-empty-preview {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: rgba(200, 175, 255, 0.45);
  font-style: italic;
  gap: 4px;
}
.cv-custom-detail-empty-preview a {
  color: rgba(255, 209, 0, 0.85);
  text-decoration: none;
  font-family: 'Cinzel', serif;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.cv-custom-detail-empty-preview a:hover { text-decoration: underline; }

/* ── Custom lightbox additions (reuses .hc-map-lightbox base) ───── */
.cv-custom-lightbox-stage img {
  max-width: 85vw;
  max-height: 80vh;
}
.cv-custom-lightbox-prev,
.cv-custom-lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 60px;
  border: 1px solid rgba(255, 209, 0, 0.35);
  background: rgba(10, 5, 28, 0.82);
  color: #ffd100;
  font-size: 28px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
  z-index: 5;
}
.cv-custom-lightbox-prev { left: 10px; }
.cv-custom-lightbox-next { right: 10px; }
.cv-custom-lightbox-prev:hover,
.cv-custom-lightbox-next:hover {
  background: rgba(30, 15, 60, 0.95);
  border-color: rgba(255, 209, 0, 0.65);
}

.cv-custom-video-stage {
  width: min(80vw, 960px);
  aspect-ratio: 16 / 9;
  background: #000;
  position: relative;
}
.cv-custom-video-stage iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   V5.8c — Siri-style 3D loading orb
   Floating color blobs with blur + screen blending inside a sphere
   vignette. The blobs drift organically — no rigid spinning arcs.
   The vignette darkens the edges to sell the 3D sphere illusion.
   ═══════════════════════════════════════════════════════════════════════ */
.cv-loading-ring {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #050210 !important;
  border-color: rgba(120, 80, 220, 0.35) !important;
  box-shadow:
    0 0 50px rgba(120, 70, 255, 0.2),
    0 0 100px rgba(80, 40, 200, 0.1),
    0 10px 40px rgba(0, 0, 0, 0.7) !important;
  animation: cv-orb-glow 4s ease-in-out infinite;
}
@keyframes cv-orb-glow {
  0%, 100% {
    box-shadow:
      0 0 50px rgba(120, 70, 255, 0.2),
      0 0 100px rgba(80, 40, 200, 0.1),
      0 10px 40px rgba(0, 0, 0, 0.7);
    border-color: rgba(120, 80, 220, 0.35);
  }
  50% {
    box-shadow:
      0 0 65px rgba(140, 90, 255, 0.35),
      0 0 120px rgba(100, 50, 220, 0.18),
      0 10px 40px rgba(0, 0, 0, 0.7);
    border-color: rgba(155, 111, 255, 0.55);
  }
}

/* ── Orb scene: contains blobs + vignette + specular ──────────── */
.cv-orb-scene {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle, #0c0620 0%, #050210 100%);
}

/* ── Color blobs: soft circles that float + blur + blend ──────── */
.cv-orb-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(18px);
  mix-blend-mode: screen;
  will-change: transform;
  opacity: 0.85;
}
/* 1: Deep violet — dominant, wide sweeping path */
.cv-orb-blob-1 {
  width: 65%; height: 65%;
  top: 5%; left: 10%;
  background: radial-gradient(circle, rgba(120, 50, 255, 0.75) 0%, rgba(80, 25, 190, 0.3) 45%, transparent 72%);
  animation: cv-blob-1 6s ease-in-out infinite;
}
/* 2: Warm gold — accent, roaming diagonally */
.cv-orb-blob-2 {
  width: 50%; height: 50%;
  top: 30%; left: 35%;
  background: radial-gradient(circle, rgba(255, 190, 50, 0.65) 0%, rgba(255, 150, 20, 0.25) 45%, transparent 72%);
  animation: cv-blob-2 4.5s ease-in-out infinite;
}
/* 3: Teal/cyan — cool accent, sweeping counter-path */
.cv-orb-blob-3 {
  width: 55%; height: 55%;
  top: 15%; left: 45%;
  background: radial-gradient(circle, rgba(40, 170, 255, 0.6) 0%, rgba(20, 110, 210, 0.22) 45%, transparent 72%);
  animation: cv-blob-3 5.5s ease-in-out infinite;
}
/* 4: Magenta/pink — warmth, small, orbiting fast */
.cv-orb-blob-4 {
  width: 40%; height: 40%;
  top: 40%; left: 5%;
  background: radial-gradient(circle, rgba(255, 70, 170, 0.55) 0%, rgba(200, 30, 130, 0.2) 45%, transparent 72%);
  animation: cv-blob-4 3.8s ease-in-out infinite;
}
/* 5: Pale violet — ambient fill, very large, slow breathing */
.cv-orb-blob-5 {
  width: 85%; height: 85%;
  top: 0%; left: 0%;
  background: radial-gradient(circle, rgba(90, 60, 180, 0.3) 0%, rgba(50, 25, 120, 0.1) 50%, transparent 72%);
  animation: cv-blob-5 8s ease-in-out infinite;
  filter: blur(25px);
  opacity: 0.7;
}

/* Blob float paths — wider sweeps, more keyframe stops, and
   rotation for organic "lava-lamp" feel. Each blob travels a
   unique elliptical orbit so they never synchronise. */
@keyframes cv-blob-1 {
  0%   { transform: translate(0%, 0%) rotate(0deg) scale(1); }
  20%  { transform: translate(25%, 20%) rotate(15deg) scale(1.08); }
  40%  { transform: translate(15%, 40%) rotate(-5deg) scale(0.94); }
  60%  { transform: translate(-15%, 25%) rotate(-15deg) scale(1.06); }
  80%  { transform: translate(-8%, 5%) rotate(8deg) scale(0.97); }
  100% { transform: translate(0%, 0%) rotate(0deg) scale(1); }
}
@keyframes cv-blob-2 {
  0%   { transform: translate(0%, 0%) rotate(0deg) scale(1); }
  25%  { transform: translate(-35%, 15%) rotate(-20deg) scale(1.12); }
  50%  { transform: translate(-20%, -25%) rotate(10deg) scale(0.88); }
  75%  { transform: translate(15%, -15%) rotate(20deg) scale(1.06); }
  100% { transform: translate(0%, 0%) rotate(0deg) scale(1); }
}
@keyframes cv-blob-3 {
  0%   { transform: translate(0%, 0%) rotate(0deg) scale(1); }
  20%  { transform: translate(-25%, 15%) rotate(12deg) scale(1.1); }
  45%  { transform: translate(-40%, -10%) rotate(-8deg) scale(0.92); }
  70%  { transform: translate(-10%, -25%) rotate(-18deg) scale(1.05); }
  100% { transform: translate(0%, 0%) rotate(0deg) scale(1); }
}
@keyframes cv-blob-4 {
  0%   { transform: translate(0%, 0%) rotate(0deg) scale(1); }
  20%  { transform: translate(40%, -10%) rotate(-15deg) scale(1.15); }
  40%  { transform: translate(30%, 20%) rotate(20deg) scale(0.85); }
  65%  { transform: translate(5%, 30%) rotate(-10deg) scale(1.1); }
  85%  { transform: translate(-10%, 10%) rotate(5deg) scale(0.95); }
  100% { transform: translate(0%, 0%) rotate(0deg) scale(1); }
}
@keyframes cv-blob-5 {
  0%   { transform: translate(0%, 0%) scale(1); }
  33%  { transform: translate(10%, 12%) scale(1.06); }
  66%  { transform: translate(-5%, 6%) scale(0.96); }
  100% { transform: translate(0%, 0%) scale(1); }
}

/* ── Sphere vignette: the key to the 3D illusion.
   Darkens edges progressively. The centre also gets a subtle tint
   so overlapping blobs in screen mode don't blow out to white. ── */
.cv-orb-vignette {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: 4;
  pointer-events: none;
  background:
    /* Gentle centre tint — prevents hot-white from blob overlap */
    radial-gradient(circle, rgba(15, 8, 40, 0.25) 0%, transparent 35%),
    /* Edge darkening — the 3D sphere curvature */
    radial-gradient(
      circle at 50% 50%,
      transparent 0%,
      transparent 22%,
      rgba(5, 2, 16, 0.15) 36%,
      rgba(5, 2, 16, 0.45) 50%,
      rgba(5, 2, 16, 0.78) 64%,
      rgba(5, 2, 16, 0.95) 78%,
      rgba(5, 2, 16, 1) 100%
    );
}

/* ── Specular highlight: faint elliptical glow at the top-left
   simulating a light source reflection on a glass sphere. ──────── */
.cv-orb-specular {
  position: absolute;
  top: 10%; left: 20%;
  width: 35%; height: 22%;
  border-radius: 50%;
  z-index: 5;
  pointer-events: none;
  background: radial-gradient(
    ellipse at 50% 50%,
    rgba(255, 255, 255, 0.07) 0%,
    rgba(200, 180, 255, 0.03) 45%,
    transparent 70%
  );
  transform: rotate(-20deg);
}

/* ═══════════════════════════════════════════════════════════════════════
   V5.9e — Fusion search reason tags ("Maybe: Stovetop Burner")
   ═══════════════════════════════════════════════════════════════════════ */

/* Small tag below the round suggestion card name */
.cv-stage-reason {
  text-align: center;
  font-family: 'DM Sans', sans-serif;
  font-size: 7.5px;
  font-weight: 500;
  color: rgba(255, 209, 0, 0.85);
  background: rgba(255, 209, 0, 0.1);
  border: 1px solid rgba(255, 209, 0, 0.3);
  border-radius: 999px;
  padding: 1px 7px;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Reason tag below the big preview circle category line */
.cv-suggestions-preview-reason {
  font-family: 'DM Sans', sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  color: rgba(255, 209, 0, 0.9);
  background: rgba(255, 209, 0, 0.1);
  border: 1px solid rgba(255, 209, 0, 0.35);
  border-radius: 999px;
  padding: 2px 12px;
  margin-top: 4px;
  display: inline-block;
}

/* ── Typing dots: three white dots that pulse in sequence ──────── */
.cv-orb-dots {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 7px;
  z-index: 6;
  pointer-events: none;
}
.cv-orb-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
  animation: cv-dot-bounce 1.4s ease-in-out infinite;
}
.cv-orb-dot:nth-child(2) { animation-delay: 0.2s; }
.cv-orb-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes cv-dot-bounce {
  0%, 60%, 100% {
    transform: scale(0.6);
    opacity: 0.35;
  }
  30% {
    transform: scale(1.3);
    opacity: 1;
  }
}

/* ── Hint text ─────────────────────────────────────────────────── */
.cv-loading-hint {
  color: rgba(200, 175, 255, 0.7) !important;
  font-family: 'Cinzel', serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  font-size: 9.5px !important;
  text-transform: uppercase !important;
  animation: cv-loading-hint-fade 2.5s ease-in-out infinite;
}
@keyframes cv-loading-hint-fade {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.9; }
}