:root {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bs-body-bg: #0f1116;
    --bs-body-color: #e5e7eb;
    --bs-emphasis-color: #f8f9fc;
    --bs-border-color: #242833;
    --card-bg: #151821;
    --card-border: #313647;
    --table-color: var(--bs-body-color);
    --table-bg: #181c26;
    --bs-secondary-color: #cfd4e2;
    --bs-secondary-color-rgb: 207, 212, 226;
    --bs-tertiary-color: #b8becf;
    --bs-tertiary-bg: #20232e;
  }

  body {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
  }

  .card,
  .modal-content,
  .offcanvas,
  .dropdown-menu {
    background-color: var(--card-bg);
    color: var(--bs-body-color);
    border-color: var(--card-border);
  }

  .table {
    color: var(--table-color);
    background-color: var(--table-bg);
  }

  .table-striped tbody tr:nth-of-type(odd) {
    --bs-table-accent-bg: rgba(255, 255, 255, 0.05);
    color: inherit;
  }

  .form-control,
  .form-select,
  .btn,
  .btn-outline-secondary,
  .btn-outline-primary,
  .input-group-text,
  .list-group-item {
    background-color: var(--card-bg);
    color: var(--bs-body-color);
    border-color: var(--card-border);
  }

  .form-control:focus,
  .form-select:focus,
  .btn:focus {
    box-shadow: 0 0 0 0.25rem rgba(62, 121, 247, 0.25);
  }

  .toast-container .toast {
    background-color: var(--card-bg);
    color: var(--bs-body-color);
  }

  .dropzone {
    border-color: #5a6274;
    background: #1f2532;
    color: #d3d7e2;
  }

  .dropzone-active {
    border-color: #7ab7ff;
    background: rgba(122, 183, 255, 0.15);
    color: #7ab7ff;
  }
}

/* Page-level styles moved from index.html */
body {
  padding: 1rem;
}

.dropzone {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 7rem;
  text-align: center;
  border: 2px dashed #6c757d;
  border-radius: 12px;
  padding: 1.25rem;
  background: #fafafa;
  color: #6c757d;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.dropzone:focus {
  outline: none;
  border-color: #0d6efd;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.dropzone-active {
  border-color: #0d6efd;
  background: #e9f2ff;
  color: #0d6efd;
}

.reference-heading-row { display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.reference-heading-row #referenceSourceHeading { min-width:0; }
.reference-heading-note { color:var(--bs-tertiary-color); font-size:.72rem; font-weight:400; white-space:nowrap; }
.reference-help { position:relative; flex:none; }
.reference-help summary { display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .55rem; border:1px solid var(--bs-border-color); border-radius:999px; color:var(--bs-secondary-color); background:rgba(var(--bs-primary-rgb),.06); cursor:pointer; font-size:.78rem; font-weight:700; list-style:none; user-select:none; }
.reference-help summary::-webkit-details-marker { display:none; }
.reference-help summary:hover,.reference-help summary:focus-visible,.reference-help[open] summary { border-color:rgba(var(--bs-primary-rgb),.72); color:var(--bs-emphasis-color); background:rgba(var(--bs-primary-rgb),.13); }
.reference-help-icon { display:grid; width:1.15rem; height:1.15rem; place-items:center; border-radius:999px; background:var(--bs-primary); color:#fff; font-size:.72rem; line-height:1; }
.reference-help-bubble { position:absolute; z-index:20; top:calc(100% + .5rem); right:0; width:min(32rem,calc(100vw - 3rem)); padding:.75rem .85rem; border:1px solid rgba(var(--bs-primary-rgb),.55); border-radius:.8rem; background:rgba(12,17,27,.98); color:var(--bs-body-color); box-shadow:0 .75rem 2rem rgba(0,0,0,.42); font-size:.86rem; line-height:1.45; }
.reference-help-bubble::before { content:''; position:absolute; right:1rem; bottom:100%; border:.4rem solid transparent; border-bottom-color:rgba(var(--bs-primary-rgb),.55); }

.thumbnail {
  width: 64px;
  height: 64px;
  object-fit: cover;
}
.result-product-meta, .costume-plan-product-meta { display:flex; align-items:center; flex-wrap:wrap; gap:.35rem; margin-bottom:.3rem; font-size:.7rem; font-weight:600; line-height:1; }
.product-rating { display:inline-flex; align-items:center; gap:.3rem; color:var(--bs-secondary-color); white-space:nowrap; }
.product-rating-stars { position:relative; display:inline-block; width:4.65em; color:color-mix(in srgb,var(--bs-secondary-color) 38%,transparent); letter-spacing:.06em; line-height:1; }
.product-rating-stars::before, .product-rating-stars::after { content:'★★★★★'; }
.product-rating-stars::after { position:absolute; inset:0 auto 0 0; width:var(--rating-fill,0%); overflow:hidden; color:#f5b942; }
.product-source-tag { display:inline-flex; align-items:center; max-width:16rem; padding:.24rem .42rem; overflow:hidden; border:1px solid var(--bs-border-color); border-radius:999px; background:var(--bs-tertiary-bg); color:var(--bs-secondary-color); text-overflow:ellipsis; white-space:nowrap; }

.table thead th {
  cursor: pointer;
}

.annotated-image {
  position: relative;
  display: block;
  max-width: min(100%, 560px);
  margin-left: auto;
  margin-right: auto;
  cursor: grab;
}

.annotated-image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: contain;
  border-radius: 0.75rem;
}

#providedImagePreview { -webkit-user-drag:none; user-select:none; }

.image-overlay-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  container-type: inline-size;
  pointer-events: none;
}

#imagePanel { position:relative; width:100%; max-width:1200px; margin-inline:auto; }
.path-first-actions {
  position:absolute;
  z-index:5;
  top:.5rem;
  right:.5rem;
  left:.5rem;
  display:grid;
  grid-template-columns:minmax(0,35%) minmax(0,27%) minmax(0,35%);
  align-items:start;
  justify-content:space-between;
  pointer-events:none;
}
.path-first-actions .feature-lane-heading { width:100%; pointer-events:auto; }
@media (max-width:575.98px) {
  .path-first-actions { grid-template-columns:minmax(0,33%) minmax(0,32%) minmax(0,33%); }
}

.item-overlay {
  position: absolute;
  border: 2px solid rgba(255, 193, 7, 0.9);
  border-radius: 0.45rem;
  pointer-events: auto;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.item-overlay:hover {
  box-shadow: 0 0 0 4px rgba(255, 193, 7, 0.25);
}

.item-overlay[data-category="headwear"] {
  border-color: rgba(13, 110, 253, 0.9);
}

.item-overlay[data-category="torso"] {
  border-color: rgba(25, 135, 84, 0.9);
}

.item-overlay[data-category="legs"] {
  border-color: rgba(220, 53, 69, 0.9);
}

.item-overlay[data-category="accessory"] {
  border-color: rgba(111, 66, 193, 0.9);
}

.item-overlay[data-category="prop"] {
  border-color: rgba(32, 201, 151, 0.9);
}

.overlay-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(33, 37, 41, 0.85);
  color: #fff;
  font-size: 0.7rem;
  padding: 2px 4px;
  border-bottom-left-radius: 0.45rem;
  border-bottom-right-radius: 0.45rem;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.item-overlay:hover .overlay-label {
  opacity: 1;
}

.feature-pin-bubble {
  position: absolute;
  z-index: 2;
  box-sizing: border-box;
  max-width: min(13rem, 72%);
  padding: .38rem .68rem;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: rgba(12,17,25,.62);
  color: rgba(255,255,255,.94);
  box-shadow: 0 .2rem .75rem rgba(0,0,0,.28);
  backdrop-filter: blur(5px);
  font-size: clamp(.72rem, 1.8vw, .86rem);
  line-height: 1.18;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: auto;
  cursor: pointer;
  transition:left .26s ease,top .26s ease,opacity .18s ease,filter .16s ease,border-color .16s ease;
}

.feature-pin-bubble:hover,
.feature-pin-bubble:focus-visible { filter: brightness(1.16); border-color: rgba(255,255,255,.62); outline: none; }
.feature-pin-bubble.active { box-shadow: 0 0 0 2px var(--bs-primary), 0 .25rem .9rem rgba(0,0,0,.38); }
.feature-pin-bubble[data-kind="material"].active { box-shadow: 0 0 0 2px rgba(255, 184, 76, .95), 0 .25rem .9rem rgba(0,0,0,.38); }

.feature-pin-bubble.feature-callout-enter {
  animation: calloutSpread .58s cubic-bezier(.2,.82,.28,1) both;
  animation-delay: var(--callout-delay, 0ms);
}

.feature-pin-bubble[data-side="left"] { text-align: left; }
.feature-pin-bubble[data-side="right"] { text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.feature-pin-bubble.is-lane-scrollable { touch-action:none; }
.feature-lane-scroll-zone {
  position:absolute;
  z-index:1;
  display:none;
  background:transparent;
  pointer-events:none;
  touch-action:none;
}
.feature-lane-scroll-zone.is-scrollable {
  display:block;
  pointer-events:auto;
  cursor:ns-resize;
}
.feature-pin-bubble[data-kind="component"] {
  border-color: rgba(137, 190, 255, .38);
  background: rgba(12, 24, 42, .62);
}
.feature-pin-bubble[data-kind="material"] {
  border-color: rgba(255, 196, 103, .5);
  background: rgba(55, 37, 13, .62);
  color: rgba(255, 235, 199, .98);
}
.feature-pin-bubble[data-kind="material"][data-provenance="inferred"] {
  border-color: rgba(255, 196, 103, .36);
}
.feature-lane-toolbar { position:absolute; z-index:3; top:.5rem; display:grid; width:min(13rem,calc(35% - 1rem)); pointer-events:auto; }
.feature-lane-toolbar-component { left:.5rem; }
.feature-lane-toolbar-material { right:.5rem; }
.feature-lane-toolbar-hybrid { left:50%; width:min(11.5rem,27%); transform:translateX(-50%); z-index:4; }
.feature-lane-heading { position:static; box-sizing:border-box; width:100%; min-height:2.55rem; padding:.48rem .6rem; border:2px solid rgba(255,255,255,.22); border-radius:999px; appearance:none; background:rgba(7,10,16,.66); color:rgba(255,255,255,.96); box-shadow:0 .18rem .65rem rgba(0,0,0,.24); backdrop-filter:blur(8px) saturate(115%); display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:inherit; font-size:clamp(.86rem,2vw,1rem); font-weight:800; line-height:1.1; letter-spacing:.025em; text-align:center; text-shadow:0 1px 3px rgba(0,0,0,.72); pointer-events:auto; cursor:pointer; touch-action:manipulation; transition:background-color .16s ease,color .16s ease,transform .16s ease; }
.feature-lane-heading-component { border-color:rgba(137,190,255,.48); }
.feature-lane-heading-material { border-color:rgba(255,196,103,.58); color:rgba(255,235,199,.98); }
.feature-lane-heading-hybrid { border-color:rgba(190,132,255,.74); color:#ead5ff; background:rgba(32,14,51,.68); }
.feature-lane-heading:hover, .feature-lane-heading:focus-visible { background:rgba(25,34,49,.92); color:#fff; transform:translateY(-1px); }
.feature-lane-heading.is-planning { animation:feature-lane-heading-pulse .9s ease-in-out infinite alternate; }
.feature-lane-heading:disabled { cursor:wait; opacity:.72; }
@keyframes feature-lane-heading-pulse { to { opacity:.58; } }
@media (max-width:899.98px) {
  .feature-lane-heading { padding:.48rem .3rem; font-size:clamp(.72rem,2vw,.95rem); }
}
.feature-leader-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.feature-leader-enter {
  opacity: 0;
  animation: calloutLeaderReveal .32s ease-out forwards;
  animation-delay: var(--callout-delay, 0ms);
}

@keyframes calloutSpread {
  from {
    opacity: 0;
    transform: translate(var(--callout-origin-x), var(--callout-origin-y)) scale(.28);
  }
  62% { opacity: 1; }
  to { opacity: 1; transform: translate(0, 0) scale(1); }
}

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

@media (prefers-reduced-motion: reduce) {
  .feature-pin-bubble.feature-callout-enter,
  .feature-leader-enter { animation: none; opacity: 1; }
}

.feature-leader-layer polyline {
  fill: none;
  stroke: rgba(172, 207, 255, .68);
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.feature-leader-layer circle {
  fill: rgba(196, 220, 255, .9);
  stroke: rgba(12, 17, 25, .72);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.feature-leader-layer .feature-leader-material {
  stroke: rgba(255, 190, 91, .82);
}

.feature-leader-layer polyline.feature-leader-inferred {
  stroke-dasharray: 4 4;
  opacity: .78;
}

.feature-leader-layer circle.feature-leader-material {
  fill: rgba(255, 205, 126, .96);
}

/* Streamlined component-shopping workflow */
.app-header { display:flex; max-width:760px; align-items:flex-start; justify-content:space-between; gap:1rem; margin:0 auto 1rem; }
.app-brand { display:flex; min-width:0; align-items:center; }
.app-brand-copy { min-width:0; }
.app-brand-icon { display:none; width:3rem; height:2.75rem; flex:none; object-fit:contain; filter:drop-shadow(0 .25rem .55rem rgba(var(--bs-primary-rgb),.28)); }
.app-brand-wordmark { display:flex; align-items:center; width:max-content; max-width:100%; line-height:.92; letter-spacing:-.055em; }
.app-brand-wordmark-icon { width:.9em; height:.86em; margin:0 -.02em 0 .04em; flex:none; object-fit:contain; filter:drop-shadow(0 .16em .3em rgba(var(--bs-primary-rgb),.24)); }
.app-brand-subtitle { display:flex; flex-wrap:wrap; column-gap:.35rem; }
.app-brand-subtitle span { white-space:nowrap; }
.app-header h1 { font-size: clamp(1.8rem, 6vw, 3rem); margin-bottom: .25rem; }
.workflow-progress { max-width: 760px; margin: 1rem auto; padding: 1rem; border: 1px solid var(--bs-border-color); border-radius: 1rem; }
.workflow-status { display: flex; align-items: center; gap: .65rem; margin-bottom: .85rem; }
.feature-bubbles { display: flex; flex-wrap: wrap; gap: .45rem; }
.feature-bubble { padding: .4rem .7rem; border-radius: 999px; background: var(--bs-tertiary-bg); font-size: .875rem; animation: bubbleIn .25s ease both; }
.results-workspace { max-width: 1100px; margin: 1rem auto; }
.workspace-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.eyebrow { font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color:var(--bs-secondary-color); }
#componentTabsContainer { position: sticky; top: 0; z-index: 10; padding-top: .5rem; background: var(--bs-body-bg); }
#componentTabs { gap: .4rem; border: 0; padding-bottom: .5rem; scrollbar-width: thin; }
#componentTabs .nav-link { position:relative; min-width: 9rem; max-width: 12rem; border:1px solid var(--bs-border-color); border-radius:.8rem; white-space:normal; line-height:1.2; }
#componentTabs .nav-link.active { border-color: var(--bs-primary); }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes bubbleIn { from { opacity:0; transform:translateY(5px) scale(.96); } to { opacity:1; transform:none; } }

@media (max-width: 767.98px) {
  body { padding: .65rem; }
  .container { padding: 0; }
  #searchForm .card { border:0; background:transparent; }
  #searchForm .card-body { padding:.25rem 0; }
  .dropzone { min-height:6.5rem; padding:1rem; }
  .annotated-image img { max-height:50vh; }
  .results-workspace { margin-top:.5rem; }
  .workspace-heading { position:sticky; top:0; z-index:11; background:var(--bs-body-bg); padding:.55rem 0; }
  #componentTabsContainer { top:3.7rem; }
  #componentTabs .nav-link { min-width:8.5rem; font-size:.9rem; }
  .results-scroll { height:58vh; min-height:58vh; max-height:58vh; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; border:1px solid var(--bs-border-color); border-radius:.65rem; }
  #resultsTable thead { display:none; }
  #resultsTable, #resultsTable tbody, #resultsTable tr, #resultsTable td { display:block; width:100%; }
  #resultsTable tr { position:relative; min-height:88px; padding:.65rem .5rem .65rem 88px; border-bottom:1px solid var(--bs-border-color); }
  #resultsTable td { border:0; padding:.12rem 0; }
  #resultsTable td:first-child { position:absolute; left:.5rem; top:.65rem; width:68px; }
  #resultsTable td:nth-child(2) { font-weight:600; }
  #resultsTable td:nth-child(3) { display:inline; margin-right:.6rem; font-size:.85rem; color:var(--bs-secondary-color); }
  .thumbnail { width:64px; height:64px; border-radius:.5rem; }
  #pageSize { display:none !important; }
}

.annotated-image { position: relative; }
.scan-overlay { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.scan-overlay::before { content: ''; position: absolute; inset: 0; background: rgba(8,12,18,.38); backdrop-filter: blur(1px); }
.scan-line { position: absolute; z-index: 2; left: 0; right: 0; height: 3px; background: rgba(50,255,145,.95); box-shadow: 0 0 14px rgba(50,255,145,.9); animation: scanY 2.2s ease-in-out infinite alternate; }
@keyframes scanY { from { top: 2%; } to { top: 98%; } }
.analysis-progress { position:absolute; z-index:4; left:50%; top:58%; width:min(28rem,calc(100% - 2rem)); transform:translate(-50%,-50%); display:grid; grid-template-columns:6.25rem minmax(0,1fr); gap:1rem; align-items:center; padding:.9rem 1rem; border:1px solid rgba(255,255,255,.2); border-radius:1rem; background:rgba(8,13,21,.84); box-shadow:0 1rem 2.5rem rgba(0,0,0,.28); backdrop-filter:blur(12px); pointer-events:none; }
.analysis-progress.d-none { display:none; }
.analysis-mask { width:5.4rem; height:4.95rem; justify-self:center; filter:drop-shadow(0 0 .75rem rgba(50,145,255,.3)); }
.analysis-mask-base { fill:rgba(255,255,255,.1); }
.analysis-mask-fill { fill:url('#analysisProgressGradient'); transition:y .7s ease,height .7s ease; }
.analysis-mask-outline { color:rgba(255,255,255,.58); }
.analysis-progress-copy { min-width:0; display:flex; flex-direction:column; gap:.3rem; }
.analysis-progress-label { color:#84b8ff; font-size:.68rem; font-weight:800; letter-spacing:.12em; }
.analysis-progress-copy strong { font-size:clamp(.95rem,2.5vw,1.15rem); line-height:1.28; }
.analysis-progress-copy #analysisProgressPercent { color:var(--bs-secondary-color); font-size:.78rem; font-variant-numeric:tabular-nums; }
@media (max-width:575.98px) {
  .analysis-progress { top:62%; grid-template-columns:4.8rem minmax(0,1fr); gap:.7rem; padding:.75rem; }
  .analysis-mask { width:4.3rem; height:3.95rem; }
}
.scan-options { position: absolute; z-index: 3; inset: auto .7rem .7rem .7rem; padding: .65rem; border: 1px solid rgba(255,255,255,.16); border-radius: .75rem; background: rgba(10,14,20,.72); backdrop-filter: blur(8px); pointer-events: auto; }
.scan-options summary { cursor: pointer; font-weight: 600; }
.scan-options > details > summary { display:flex; flex-wrap:wrap; align-items:baseline; gap:.25rem .5rem; }
.scan-options > details > summary .shopping-detail { color:var(--bs-secondary-color); font-size:.76rem; font-weight:400; }
.scan-option-group { display: flex; flex-wrap: wrap; gap: .4rem .65rem; margin-top: .5rem; align-items: center; font-size: .82rem; }
.scan-option-group > span { font-weight: 600; min-width: 2.5rem; }
.scan-option-group label { margin: 0; white-space: nowrap; }
.scan-options .feature-bubbles { margin-top: .55rem; max-height: 5rem; overflow: auto; }
/* Stable scan stage: reserve enough visual space for image + controls on phones. */
#previewContainer.annotated-image { width:100%; max-width:1200px; min-height:min(72vh,680px); display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.025); border:1px solid var(--bs-border-color); border-radius:.8rem; overflow:hidden; }
#previewContainer.annotated-image img { width:100%; height:100%; max-height:min(72vh,680px); object-fit:contain; }
@media (max-width:767.98px) {
  #previewContainer.annotated-image { min-height:62vh; max-height:72vh; }
  #previewContainer.annotated-image img { max-height:72vh; }
  .scan-options { bottom:2.25rem; }
}
/* Keep quick shopping choices at the top of the scan stage, independent of image shape. */
.scan-options { top:.7rem; bottom:auto; }
@media (max-width:767.98px) { .scan-options { top:.7rem; bottom:auto; } }
.scan-bubbles { position:absolute; z-index:3; top:11.2rem; right:.8rem; bottom:2.5rem; left:.8rem; display:flex; flex-wrap:wrap; align-content:flex-start; gap:.4rem; max-height:none; overflow:hidden; pointer-events:none; }
.scan-bubbles .feature-bubble { background:rgba(18,24,34,.82); backdrop-filter:blur(7px); }
@media (max-width:767.98px) { .scan-bubbles { top:11.6rem; bottom:2.5rem; } }
.post-analysis-controls { width:100%; max-width:760px; margin:.65rem auto 0; }
.post-analysis-controls .scan-options { position:static; inset:auto; width:100%; }
.post-analysis-controls .scan-bubbles { position:static; inset:auto; display:flex; flex-wrap:wrap; gap:.4rem; max-height:none; margin-top:.55rem; overflow:visible; }
.materials-panel { border:1px solid var(--bs-border-color); border-radius:.75rem; padding:.7rem; }
.material-chip { border:1px solid var(--bs-border-color); color:inherit; cursor:pointer; }
@media (max-width:767.98px) { .item-actions { display:grid !important; grid-template-columns:2fr 1fr; } }

/* Persistent per-target shopping state. */
#componentTabs .nav-link, #materialsTabs .nav-link { display:flex; align-items:center; justify-content:center; gap:.45rem; }
.target-status { flex:0 0 auto; min-width:1.45rem; height:1.45rem; padding:0 .35rem; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:700; line-height:1; }
.target-status-results { background:rgba(25,135,84,.22); color:#75d9a5; border:1px solid rgba(117,217,165,.4); }
.target-status-empty { background:rgba(255,193,7,.16); color:#ffd666; border:1px solid rgba(255,214,102,.35); }
.target-status-error { background:rgba(220,53,69,.18); color:#ff8995; border:1px solid rgba(255,137,149,.35); }

.reference-summary { display:grid; grid-template-columns:3.25rem minmax(0,1fr) auto auto; gap:.65rem; align-items:center; padding:.65rem .75rem; border:1px solid var(--bs-border-color); border-radius:.85rem; background:var(--bs-body-bg); }
.reference-summary img { width:3.25rem; height:3.25rem; border-radius:.65rem; object-fit:cover; background:var(--bs-tertiary-bg); }
.reference-summary-copy { min-width:0; display:flex; flex-direction:column; }
.reference-summary-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width: 575.98px) { .reference-summary { grid-template-columns:3rem minmax(0,1fr) auto; } .reference-summary img { width:3rem; height:3rem; } .reference-summary #editReferenceBtn { grid-column:3; grid-row:1; } }

.shopping-options-workspace { border:1px solid var(--bs-border-color); border-radius:.75rem; padding:.7rem .85rem; }
.results-workspace.plan-loading #componentTabsContainer { display:none !important; }
.shopping-options-workspace > summary { cursor:pointer; font-weight:600; }
.shopping-options-workspace .scan-options { position:static; inset:auto; width:auto; max-height:none; overflow:visible; background:transparent; border:0; box-shadow:none; padding:.25rem 0 0; }
.shopping-options-workspace .scan-options > details > summary { display:none; }

@media (min-width: 768px) { .results-scroll { height:65vh; min-height:65vh; max-height:65vh; overflow:auto; } .results-scroll #resultsTable thead { position:sticky; top:0; z-index:2; background:var(--bs-body-bg); } }
.reference-summary-actions { display:flex; flex-direction:column; gap:.35rem; }
@media (max-width: 575.98px) {
  .reference-summary { grid-template-columns:3rem minmax(0,1fr) auto; }
  .reference-summary-actions { grid-column:3; grid-row:1; }
  .reference-summary #editReferenceBtn { transform:none; grid-column:auto; grid-row:auto; }
}
.target-section { border:0; }
.target-section-heading { cursor:pointer; list-style:none; font-size:1.08rem; font-weight:600; color:var(--bs-body-color); display:flex; align-items:baseline; gap:.45rem; }
.target-section-heading::-webkit-details-marker { display:none; }
.target-section-heading::before { content:'▸'; font-size:.9em; transition:transform .15s ease; }
.target-section[open] > .target-section-heading::before { transform:rotate(90deg); }
.target-section-note { font-size:.82rem; font-weight:400; color:var(--bs-secondary-color); }
.reference-description > summary, .image-url-entry > summary { cursor:pointer; color:var(--bs-body-color); }
.reference-description > summary { font-size:1rem; font-weight:500; }
.image-url-entry { max-width:28rem; margin-inline:auto; }
.image-url-entry > summary { font-size:.88rem; color:var(--bs-secondary-color); }
.dropzone .image-url-entry input { text-align:left; }
.shopping-mode-card { border:1px solid var(--bs-border-color); border-radius:.75rem; overflow:hidden; background:var(--bs-body-bg); }
.shopping-mode-tabs { display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--bs-border-color); }
.shopping-mode-tab { border:0; background:transparent; color:var(--bs-secondary-color); padding:.85rem .6rem; display:flex; flex-direction:column; gap:.15rem; align-items:center; }
.shopping-mode-tab + .shopping-mode-tab { border-left:1px solid var(--bs-border-color); }
.shopping-mode-tab strong { font-size:1.02rem; color:var(--bs-body-color); }
.shopping-mode-tab span { font-size:.78rem; }
.shopping-mode-tab.active { background:rgba(var(--bs-primary-rgb),.10); box-shadow:inset 0 -2px 0 var(--bs-primary); }
.shopping-mode-panel { padding:.85rem; }
.refine-target-card > summary { display:flex; gap:.35rem; align-items:baseline; }
.refine-target-card .input-group { flex-wrap:nowrap; }
@media (max-width:575.98px) { .refine-target-card .btn { padding-inline:.65rem; } }
/* Unified selectable target styling across Prefab and DIY modes. */
#componentTabs, #materialsTabs { gap:.4rem; border:0; padding-bottom:.5rem; scrollbar-width:thin; }
#componentTabs .nav-link, #materialsTabs .nav-link { position:relative; min-width:9rem; max-width:12rem; min-height:4rem; padding:.65rem .75rem; border:1px solid var(--bs-border-color); border-radius:.8rem; white-space:normal; line-height:1.2; background:transparent; color:var(--bs-primary); }
#componentTabs .nav-link.active, #materialsTabs .nav-link.active { border-color:var(--bs-primary); box-shadow:0 0 0 1px var(--bs-primary); background:rgba(var(--bs-primary-rgb),.06); color:var(--bs-body-color); }
.shopping-mode-panel .shopping-options-workspace { margin-inline:0; }
.search-term-toggles { display:flex; flex-wrap:wrap; gap:.45rem; }
.search-term { border:1px solid var(--bs-primary); border-radius:999px; background:rgba(var(--bs-primary-rgb),.10); color:var(--bs-body-color); padding:.35rem .65rem; font-size:.88rem; }
.search-term.excluded { border-color:var(--bs-border-color); background:transparent; color:var(--bs-secondary-color); text-decoration:line-through; opacity:.7; }
.reference-ladder { display:flex; flex-direction:column; gap:.55rem; }
.reference-method-switch { display:grid; width:100%; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid var(--bs-border-color); border-radius:.7rem; overflow:hidden; }
.reference-method { width:100%; min-width:0; min-height:2.85rem; border:0; border-radius:0; background:transparent; color:var(--bs-secondary-color); font-weight:600; }
.reference-method + .reference-method { border-left:1px solid var(--bs-border-color); }
.reference-method:hover { background:rgba(var(--bs-primary-rgb),.05); color:var(--bs-body-color); }
.reference-method.active { background:rgba(var(--bs-primary-rgb),.12); box-shadow:inset 0 -2px 0 var(--bs-primary); color:var(--bs-body-color); }
.reference-method:disabled, .reference-control-disabled { cursor:wait; opacity:.65; }
.reference-method-panel { padding:0; border:0; border-radius:0; background:transparent; }
.reference-search { padding:0; }
.own-reference-note { margin-bottom:.65rem; color:var(--bs-secondary-color); font-size:.8rem; }
.reference-candidates { position:relative; display:grid; grid-template-columns:2.75rem minmax(0,1fr) 2.75rem; grid-template-rows:minmax(0,1fr) auto auto; gap:.55rem; align-items:center; padding:.65rem; border:1px solid var(--bs-border-color); border-radius:.8rem; background:var(--bs-tertiary-bg); }
.reference-candidate-stage { grid-column:2; grid-row:1; height:clamp(16rem,48vh,34rem); display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:.7rem; background:rgba(0,0,0,.18); touch-action:pan-y; }
.reference-candidate-stage img { width:100%; height:100%; object-fit:contain; }
.reference-candidate-nav { width:2.5rem; height:2.5rem; border-radius:999px; border:1px solid var(--bs-border-color); background:var(--bs-body-bg); color:var(--bs-body-color); font-size:1.65rem; line-height:1; }
.reference-candidate-prev { grid-column:1; grid-row:1; }
.reference-candidate-next { grid-column:3; grid-row:1; }
.reference-candidate-meta { grid-column:1 / 4; grid-row:2; min-width:0; text-align:center; color:var(--bs-secondary-color); font-size:.82rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.reference-candidates #useReferenceBtn { grid-column:1 / 4; grid-row:3; }
/* Keep the chosen image and its primary action in one predictable viewport. */
#previewContainer.annotated-image { min-height:0; height:clamp(30rem,72vh,48rem); max-height:72vh; }
#previewContainer.annotated-image img { height:100%; max-height:72vh; object-fit:contain; }
@media (max-width:767.98px) {
  #previewContainer.annotated-image { height:min(76vh,44rem); max-height:76vh; }
  #previewContainer.annotated-image img { max-height:76vh; }
}
@media (max-width:575.98px) {
  .reference-search .input-group { display:grid; grid-template-columns:1fr; gap:.4rem; }
  .reference-search .input-group > * { width:100%; border-radius:.5rem !important; }
  .reference-candidates { grid-template-columns:2.35rem minmax(0,1fr) 2.35rem; padding:.45rem; }
  .reference-candidate-stage { height:clamp(15rem,43vh,27rem); }
}
.annotated-image { position:relative; }
.replace-reference-btn { position:absolute; z-index:8; top:.7rem; right:.7rem; backdrop-filter:blur(8px); background:rgba(15,18,24,.72); }
/* Results are a dedicated bottom workspace: page scroll never has to expose table rows. */
.results-dock { position:relative; z-index:1; display:flex; flex-direction:column; width:100%; height:min(58vh,38rem); min-height:20rem; border:1px solid var(--bs-border-color); border-radius:.8rem .8rem 0 0; background:var(--bs-body-bg); box-shadow:none; overflow:hidden; }
.results-dock-toolbar { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.55rem .65rem; border-bottom:1px solid var(--bs-border-color); background:var(--bs-body-bg); }
.results-scroll { flex:1 1 auto; min-height:0; height:auto !important; max-height:none !important; overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; touch-action:pan-y pan-x; }
.results-scroll #resultsTable { margin-bottom:0; }
.results-scroll #resultsTable thead { position:sticky; top:0; z-index:2; background:var(--bs-body-bg); }
@media (max-width:767.98px) {
  .results-dock { height:52vh; min-height:18rem; border-radius:.7rem .7rem 0 0; }
  .results-dock-toolbar { padding:.45rem .5rem; }
  .results-page-size label { margin-right:0 !important; font-size:.82rem; }
}
/* Results card: only rows scroll; heading and pagination are fixed within the card. */
.results-dock { height:clamp(30rem,66vh,42rem); min-height:30rem; border-radius:.8rem; }
.results-dock-heading { flex:0 0 auto; padding:.55rem .7rem; border-bottom:1px solid var(--bs-border-color); background:var(--bs-body-bg); }
.results-dock-heading strong { font-size:1.05rem; }
.results-scroll { flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:auto; overscroll-behavior:contain; }
.results-dock-toolbar { flex:0 0 auto; border-top:1px solid var(--bs-border-color); border-bottom:0; }
@media (max-width:767.98px) {
  .results-dock { height:clamp(31rem,68vh,41rem); min-height:31rem; }
  .results-scroll #resultsTable thead { display:none; }
}
/* Five-row results viewport: stable regardless of surrounding page height. */
:root { --result-row-height: 7.25rem; }
.results-dock { height:auto; min-height:0; }
.results-scroll { flex:none; height:calc(5 * var(--result-row-height)) !important; min-height:calc(5 * var(--result-row-height)); max-height:calc(5 * var(--result-row-height)) !important; overflow-y:auto; overflow-x:auto; }
.results-scroll #resultsTable tbody tr { height:var(--result-row-height); min-height:var(--result-row-height); max-height:var(--result-row-height); }
.results-scroll #resultsTable tbody td { height:var(--result-row-height); max-height:var(--result-row-height); overflow:hidden; vertical-align:middle; }
@media (max-width:767.98px) {
  :root { --result-row-height: 7rem; }
  .results-dock { height:auto; min-height:0; }
}
/* Mobile results behave like a fixed data-table panel. The document reserves the same
   space so page content never scrolls underneath it; only the rows scroll in the panel. */
@media (max-width:767.98px) {
  :root { --results-panel-height: min(48rem, 62dvh); --results-row-height: 7rem; }
  .results-workspace { padding-bottom:var(--results-panel-height); }
  .results-dock {
    position:fixed;
    z-index:1040;
    left:max(.5rem, env(safe-area-inset-left));
    right:max(.5rem, env(safe-area-inset-right));
    bottom:env(safe-area-inset-bottom);
    width:auto;
    height:var(--results-panel-height);
    min-height:0;
    max-height:var(--results-panel-height);
    display:grid;
    grid-template-rows:auto minmax(0,1fr) auto;
    border-radius:.8rem .8rem 0 0;
    background:var(--bs-body-bg);
    box-shadow:0 -10px 28px rgba(0,0,0,.35);
    overflow:hidden;
  }
  .results-dock-heading { grid-row:1; }
  .results-scroll {
    grid-row:2;
    width:100%;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow-y:scroll;
    overflow-x:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y pan-x;
  }
  .results-dock-toolbar { grid-row:3; position:relative; z-index:2; }
  .results-scroll #resultsTable tbody tr,
  .results-scroll #resultsTable tbody td { height:var(--results-row-height); max-height:var(--results-row-height); }
}
/* Results belong directly below Search selected in document flow. Never viewport-fixed/sticky. */
@media (max-width:767.98px) {
  .results-workspace { padding-bottom:0; }
  .results-dock {
    position:relative;
    z-index:1;
    left:auto;
    right:auto;
    bottom:auto;
    width:100%;
    height:auto;
    min-height:0;
    max-height:none;
    display:grid;
    grid-template-rows:auto calc(5 * var(--results-row-height)) auto;
    border-radius:.8rem;
    box-shadow:none;
  }
  .results-scroll {
    height:calc(5 * var(--results-row-height)) !important;
    min-height:calc(5 * var(--results-row-height)) !important;
    max-height:calc(5 * var(--results-row-height)) !important;
    overflow-y:auto;
    overscroll-behavior:contain;
  }
}
/* Final results behavior: the panel follows Search selected in document flow.
   Header/footer never scroll; only the product-row viewport does. */
.results-dock {
  position:relative !important;
  inset:auto !important;
  width:100% !important;
  display:grid !important;
  grid-template-rows:auto minmax(0, 1fr) auto !important;
  overflow:hidden !important;
}
.results-dock-heading,
.results-dock-toolbar {
  position:relative !important;
  flex:none !important;
  z-index:2;
  background:var(--bs-body-bg);
}
.results-scroll {
  position:relative !important;
  min-height:0 !important;
  overflow-y:auto !important;
  overflow-x:auto !important;
  overscroll-behavior:contain !important;
  -webkit-overflow-scrolling:touch;
}
@media (max-width:767.98px) {
  :root { --results-row-height:7rem; }
  .results-workspace { padding-bottom:0 !important; }
  .results-dock {
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    grid-template-rows:auto calc(5 * var(--results-row-height)) auto !important;
  }
  .results-scroll {
    height:calc(5 * var(--results-row-height)) !important;
    min-height:calc(5 * var(--results-row-height)) !important;
    max-height:calc(5 * var(--results-row-height)) !important;
  }
}
/* Results are ordinary page content after Search selected. No nested scrolling. */
.results-dock,
.results-scroll {
  position:relative !important;
  inset:auto !important;
  display:block !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:visible !important;
  overscroll-behavior:auto !important;
}
.results-dock { border-radius:.8rem; }
.results-dock-heading,
.results-dock-toolbar { position:relative !important; }
@media (max-width:767.98px) {
  .results-workspace { padding-bottom:0 !important; }
  .results-dock,
  .results-scroll {
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
  }
}
/* No nested results scroller: browser/document is the only vertical scroll container. */
#resultsScroll,
#resultsScroll.table-responsive {
  display:block !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow-x:auto !important;
  overflow-y:visible !important;
  overscroll-behavior:auto !important;
  touch-action:auto !important;
  -webkit-overflow-scrolling:auto !important;
}
#resultsDock { height:auto !important; min-height:0 !important; max-height:none !important; overflow:visible !important; }
@media (max-width:767.98px) {
  #resultsScroll,
  #resultsScroll.table-responsive { height:auto !important; min-height:0 !important; max-height:none !important; overflow-y:visible !important; }
}
/* Single-scroll layout: shopping controls and results all participate in normal document flow. */
#componentTabsContainer,
.workspace-heading,
#resultsTable thead {
  position:static !important;
  top:auto !important;
}
#componentTabsContainer { z-index:auto !important; }
/* Reference replacement is a workflow action, not an image-overlay control. */
.replace-reference-btn { position:static; }
/* Desktop reference workflow: focused working column instead of an ultra-wide upload card. */
@media (min-width:768px) {
  body { padding:1.5rem; }
  .container { max-width:1280px; }
  .app-header { max-width:1200px; margin:0 auto 1.25rem; }
  .app-header h1 { font-size:3rem; letter-spacing:-.035em; }
  #searchForm .row > .col-12 { max-width:960px; }
  #searchForm .card-body { padding:1.5rem; gap:1.25rem !important; }
  .reference-search .form-text { margin-top:.5rem; }
  .dropzone { min-height:8rem; padding:1.25rem; }
  #previewContainer.annotated-image { height:clamp(30rem,72vh,48rem); }
  .reference-candidate-stage { height:min(58vh,36rem); }
}
/* One stable application column before and after analysis. */
.app-shell { width:100%; max-width:960px; margin-left:auto; margin-right:auto; }
.results-workspace.app-shell { max-width:960px; }
.reference-summary.app-shell { max-width:960px; }
#searchForm.app-shell { max-width:1200px; }
#searchForm > .row { margin:0; }
#searchForm > .row > .col-12 { width:100%; max-width:none; padding:0; }
#searchForm .card { border:0; background:transparent; box-shadow:none; }
#searchForm .card-body { padding:0; gap:0 !important; }
#searchForm #previewContainer.has-unified-plan { max-width:1200px; }

/* One shopping surface: choose a target, adjust it, then search. */
.shopping-mode-card { border-radius:1rem; }
.callout-shopping-mode > .shopping-mode-tabs,
.callout-shopping-mode > #prefabItemsSection,
.callout-shopping-mode > #materialsTabsContainer { display:none !important; }
.callout-shopping-mode .shopping-setup { border-top:0; }
.shopping-mode-panel { padding:.85rem; }
.shopping-step-label { margin:0 0 .55rem; color:var(--bs-secondary-color); font-size:.74rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.shopping-setup { border-top:1px solid var(--bs-border-color); }
.shopping-setup .shopping-options-workspace { margin:0 !important; padding:0; border:0; border-bottom:1px solid var(--bs-border-color); border-radius:0; }
.shopping-setup .shopping-options-workspace > summary {
  position:relative;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.25rem .5rem;
  min-height:3.5rem;
  padding:.8rem 2.5rem .8rem .9rem;
  list-style:none;
  cursor:pointer;
  font-size:.95rem;
  line-height:1.3;
}
.shopping-setup .shopping-options-workspace > summary::-webkit-details-marker { display:none; }
.shopping-setup .shopping-options-workspace > summary::after { content:'⌄'; position:absolute; top:.85rem; right:1rem; color:var(--bs-secondary-color); font-size:1.1rem; line-height:1; transition:transform .15s ease; }
.shopping-setup .shopping-options-workspace[open] > summary::after { transform:rotate(180deg); }
.shopping-setup .shopping-options-workspace > summary > span:first-child { font-weight:600; }
.shopping-setup .shopping-detail,
.shopping-setup .refine-target-name { display:block; margin-top:.12rem; color:var(--bs-secondary-color); font-size:.79rem; font-weight:400; overflow-wrap:anywhere; }
.shopping-setup .refine-target-name:not(:empty)::before { content:none; }
.shopping-detail-body,
.shopping-setup .refine-target-card > .input-group,
.shopping-setup .search-term-toggles { margin:.05rem .9rem .85rem !important; }
.shopping-setup .scan-options { padding:0; }
.shopping-options-workspace.materials-mode .shopping-for-group { display:none; }
[hidden] { display:none !important; }
.analysis-budget-only { display:none; }
.scan-options.analysis-budget-mode .analysis-budget-only { display:grid; }
.scan-options.analysis-budget-mode .post-analysis-budget-only { display:none; }
.scan-options.analysis-budget-mode .shopping-for-group { display:flex; }
.whole-budget-group { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-top:.45rem; padding-top:.45rem; border-top:1px solid var(--bs-border-color); color:var(--bs-secondary-color); font-size:.8rem; font-weight:600; }
.whole-budget-input { display:flex; align-items:center; gap:.25rem; color:var(--bs-body-color); }
.whole-budget-input input { width:7rem; padding:.28rem .45rem; border:1px solid var(--bs-border-color); border-radius:.45rem; background:var(--bs-body-bg); color:var(--bs-body-color); }
.shopping-options-workspace.materials-mode .price-range-group { margin-top:.35rem; padding-top:.35rem; border-top:0; }
.price-range-group { display:grid; grid-template-columns:10rem 4.25rem minmax(8rem,1fr) 4.25rem 5rem; align-items:center; gap:.5rem; min-height:2.5rem; margin-top:.55rem; padding-top:.55rem; border-top:1px solid var(--bs-border-color); }
.price-range-heading,
.price-range-scale { display:contents; }
.price-range-heading > span { grid-column:1; color:var(--bs-secondary-color); font-size:.8rem; font-weight:600; white-space:nowrap; }
.price-range-heading output { grid-column:5; color:var(--bs-body-color); font-size:.8rem; font-weight:600; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
.price-range-control { position:relative; grid-column:3; height:1.75rem; margin:0; }
.price-range-control::after { content:""; position:absolute; z-index:1; top:calc(50% - .28rem); right:0; left:0; height:.56rem; pointer-events:none; opacity:.42; background:repeating-linear-gradient(to right, transparent 0 calc((100% / var(--tick-count, 12)) - 1px), var(--bs-secondary-color) calc((100% / var(--tick-count, 12)) - 1px) calc(100% / var(--tick-count, 12))); }
.price-range-track { position:absolute; top:50%; right:0; left:0; height:.3rem; transform:translateY(-50%); border-radius:999px; background:var(--bs-border-color); }
.price-range-track span { position:absolute; top:0; bottom:0; left:0; right:0; border-radius:inherit; background:var(--bs-primary); }
.price-range-control input[type="range"] { position:absolute; inset:0; z-index:2; width:100%; height:1.75rem; margin:0; appearance:none; -webkit-appearance:none; background:transparent; pointer-events:none; touch-action:none; }
.price-range-control input[type="range"]::-webkit-slider-thumb { width:1.15rem; height:1.15rem; appearance:none; -webkit-appearance:none; border:2px solid var(--bs-primary); border-radius:50%; background:var(--bs-body-bg); box-shadow:0 0 0 .18rem rgba(var(--bs-primary-rgb),.14); cursor:grab; pointer-events:auto; }
.price-range-control input[type="range"]::-moz-range-thumb { width:1rem; height:1rem; border:2px solid var(--bs-primary); border-radius:50%; background:var(--bs-body-bg); box-shadow:0 0 0 .18rem rgba(var(--bs-primary-rgb),.14); cursor:grab; pointer-events:auto; }
.price-range-control input[type="range"]:focus-visible::-webkit-slider-thumb { outline:2px solid #fff; outline-offset:2px; }
.costume-budget-range-group .price-range-track span { right:0; }
.price-range-scale { color:var(--bs-secondary-color); font-size:.68rem; white-space:nowrap; }
.price-range-scale > span:first-child { grid-column:2; }
.price-range-scale > span:last-child { grid-column:4; }
.shopping-setup .refine-target-card .input-group { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:.4rem; width:calc(100% - 1.8rem) !important; max-width:none; box-sizing:border-box; }
.shopping-setup .refine-target-card .input-group > * { min-width:0; border-radius:.55rem !important; }
.shopping-setup .refine-target-card .input-group > input { width:100% !important; }
.shopping-setup .refine-search-terms { margin:0 .9rem .85rem; padding-top:.75rem; border-top:1px solid var(--bs-border-color); }
.shopping-setup .refine-search-terms-heading { display:flex; align-items:baseline; gap:.45rem; }
.shopping-setup .refine-search-terms-heading > span:first-child { font-size:.88rem; font-weight:600; }
.shopping-setup .refine-search-terms-heading > span:last-child { color:var(--bs-secondary-color); font-size:.77rem; }
.shopping-setup .refine-search-terms .search-term-toggles { margin:.55rem 0 0 !important; }
.shopping-setup .search-term-toggles { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.45rem; }
.shopping-setup .search-term { display:flex; align-items:center; gap:.5rem; min-width:0; min-height:2.5rem; padding:.45rem .6rem; border-color:rgba(var(--bs-primary-rgb),.45); border-radius:.55rem; font-size:.81rem; line-height:1.25; text-align:left; }
.shopping-setup .search-term::before { content:'✓'; display:grid; place-items:center; flex:none; width:1rem; height:1rem; border-radius:.25rem; background:var(--bs-primary); color:#fff; font-size:.7rem; font-weight:700; }
.shopping-setup .search-term.excluded::before { content:''; background:transparent; border:1px solid var(--bs-secondary-color); }
.shopping-submit { padding:.85rem; }
.shopping-submit #searchSelectedBtn { width:100%; min-height:2.75rem; }
.costume-plan-workspace { margin:0 0 1rem; padding:1rem; border:1px solid var(--bs-border-color); border-radius:1rem; background:var(--bs-body-bg); }
.costume-plan-heading { display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; margin-bottom:.8rem; }
.costume-plan-heading h2 { margin:.08rem 0 .2rem; font-size:1.25rem; }
.costume-plan-heading p { margin:0; color:var(--bs-secondary-color); font-size:.86rem; }
#costumePlanKind, .plan-modal-eyebrow { color:var(--bs-primary); font-size:.68rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
#costumePlanTotal { white-space:nowrap; font-variant-numeric:tabular-nums; }
.costume-plan-lines { display:grid; gap:.55rem; }
.costume-plan-error { padding:.9rem; border:1px solid color-mix(in srgb,var(--bs-danger) 45%,var(--bs-border-color)); border-radius:.75rem; color:var(--bs-secondary-color); }
.plan-budget-range-group { grid-template-columns:auto minmax(0,1fr) auto; gap:.25rem .5rem; margin-top:0; padding-top:0; border-top:0; }
.plan-budget-range-group .price-range-heading label { grid-column:1/3; color:var(--bs-secondary-color); font-size:.8rem; font-weight:600; white-space:nowrap; }
.plan-budget-range-group .price-range-heading output { grid-column:3; }
.plan-budget-range-group .price-range-control { grid-column:1/4; grid-row:2; margin-inline:.35rem; }
.plan-budget-range-group .price-range-scale > span:first-child { grid-column:1; grid-row:3; text-align:left; }
.plan-budget-range-group .price-range-scale > span:last-child { grid-column:3; grid-row:3; text-align:right; }
.plan-department { min-width:0; margin:0; padding:.75rem 0 0; border:0; border-top:1px solid var(--bs-border-color); }
.plan-department legend { float:none; width:auto; margin:0 0 .55rem; font-size:.88rem; font-weight:600; }
.plan-department-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.45rem; }
.plan-department-options label { display:flex; align-items:center; gap:.4rem; min-width:0; margin:0; padding:.48rem .6rem; border:1px solid var(--bs-border-color); border-radius:.55rem; cursor:pointer; }
.plan-department-options label:has(input:checked) { border-color:var(--bs-primary); background:rgba(var(--bs-primary-rgb),.12); }
.costume-plan-line { display:grid; grid-template-columns:minmax(14rem,1.25fr) 4.25rem minmax(10rem,.9fr) minmax(4.5rem,auto); gap:.65rem; align-items:center; padding:.7rem; border:1px solid var(--bs-border-color); border-radius:.75rem; }
.costume-plan-line-copy { min-width:0; }
.costume-plan-line-copy strong, .costume-plan-line-copy span { display:block; }
.costume-plan-line-copy span { color:var(--bs-secondary-color); font-size:.78rem; }
.costume-plan-decision-badges { display:flex !important; flex-wrap:wrap; gap:.3rem; margin-bottom:.25rem; }
.costume-plan-source-badge, .costume-plan-contract-badge, .costume-plan-priority-badge { display:inline-flex !important; width:max-content; padding:.18rem .45rem; border:1px solid rgba(190,132,255,.55); border-radius:999px; color:#d9b2ff !important; background:rgba(119,57,173,.16); font-size:.64rem !important; font-weight:800; letter-spacing:.055em; text-transform:uppercase; }
.costume-plan-contract-badge { border-color:rgba(var(--bs-primary-rgb),.55); color:#b9d6ff !important; background:rgba(var(--bs-primary-rgb),.1); }
.costume-plan-priority-badge { border-color:rgba(255,193,7,.45); color:#ffe29a !important; background:rgba(255,193,7,.08); }
.costume-plan-line-copy .costume-plan-decision-details { margin-top:.22rem; color:color-mix(in srgb,var(--bs-secondary-color) 88%,white); font-size:.72rem; line-height:1.35; }
.costume-plan-thumbnail { display:block; width:4.25rem; height:4.25rem; overflow:hidden; border:1px solid var(--bs-border-color); border-radius:.55rem; background:var(--bs-tertiary-bg); }
.costume-plan-thumbnail img { display:block; width:100%; height:100%; object-fit:contain; background:#fff; }
.costume-plan-reference-crop { position:relative; }
.costume-plan-reference-crop svg { display:block; width:100%; height:100%; background:#fff; filter:saturate(.82) contrast(.96); }
.costume-plan-thumbnail-empty { opacity:.35; }
.costume-plan-product { display:flex; flex-direction:column; align-items:flex-start; gap:.45rem; min-width:0; text-align:left; }
.costume-plan-product-meta { margin-bottom:0; }
.costume-plan-product-link { display:block; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.costume-plan-product .btn { align-self:flex-start; }
.costume-plan-price { justify-self:end; text-align:right; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.costume-plan-carousel-shell { grid-column:2/-1; display:grid; grid-template-columns:2rem minmax(0,1fr) 2rem; gap:.45rem; align-items:stretch; min-width:0; }
.costume-plan-carousel { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(15rem,42%); gap:.55rem; min-width:0; overflow-x:auto; overscroll-behavior-inline:contain; scroll-snap-type:x mandatory; scrollbar-width:thin; }
.costume-plan-carousel-card { display:grid; grid-template-columns:4.25rem minmax(0,1fr); gap:.6rem; min-width:0; padding:.55rem; border:1px solid var(--bs-border-color); border-radius:.65rem; background:var(--bs-tertiary-bg); scroll-snap-align:start; }
.costume-plan-carousel-card.is-selected { border-color:var(--bs-primary); box-shadow:inset 0 0 0 1px var(--bs-primary); }
.costume-plan-carousel-thumbnail { display:block; width:4.25rem; height:4.25rem; overflow:hidden; border:1px solid var(--bs-border-color); border-radius:.5rem; background:var(--bs-body-bg); }
.costume-plan-carousel-thumbnail img { display:block; width:100%; height:100%; object-fit:contain; background:#fff; }
.costume-plan-carousel-copy { display:flex; flex-direction:column; min-width:0; }
.costume-plan-carousel-footer { display:flex; align-items:flex-end; justify-content:space-between; gap:.5rem; margin-top:auto; padding-top:.45rem; }
.costume-plan-carousel-footer .costume-plan-price { justify-self:auto; text-align:left; }
.costume-plan-carousel-step { display:grid; place-items:center; min-width:2rem; padding:0; border:1px solid var(--bs-border-color); border-radius:.55rem; color:var(--bs-body-color); background:var(--bs-body-bg); font-size:1.45rem; line-height:1; }
.costume-plan-carousel-step:hover { border-color:var(--bs-primary); color:var(--bs-primary); }
.costume-plan-carousel-actions { grid-column:2/-1; padding-left:2.45rem; }
.costume-plan-price-total, .costume-plan-price-detail, .result-price-total, .result-price-detail { display:block; }
.costume-plan-price-detail, .result-price-detail { margin-top:.12rem; color:var(--bs-secondary-color); font-size:.68rem; font-weight:500; }
.result-price-total, .result-price-detail { white-space:nowrap; }
#resultsTable th:nth-child(3), #resultsTable td:nth-child(3) { width:1%; min-width:max-content; text-align:right; white-space:nowrap; }
.costume-plan-searching { display:inline-flex; align-items:center; gap:.4rem; color:var(--bs-secondary-color); }

/* Unified image-first plan workspace. Plan rows remain the data source, while the
   selected row is projected back onto its anchored image bubble. */
.image-workspace-toolbar { display:flex; flex:1 1 auto; flex-wrap:wrap; justify-content:flex-end; gap:.45rem; padding-top:.35rem; }
.image-workspace-toolbar button { display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .72rem; border:1px solid rgba(var(--bs-primary-rgb),.58); border-radius:999px; background:rgba(12,17,27,.72); color:var(--bs-body-color); box-shadow:0 .25rem .8rem rgba(0,0,0,.2); backdrop-filter:blur(8px); font-size:.8rem; font-weight:700; }
.image-workspace-toolbar button:hover,.image-workspace-toolbar button:focus-visible { border-color:var(--bs-primary); background:rgba(var(--bs-primary-rgb),.14); }
.image-workspace-toolbar button:disabled { cursor:wait; opacity:.55; }
.action-label-compact { display:none; }
#previewContainer.has-unified-plan { width:100%; max-width:960px; height:clamp(30rem,72vh,48rem); max-height:72vh; }
#previewContainer.has-unified-plan img { max-height:72vh; }
.plan-focus-drawer {
  position:absolute;
  z-index:6;
  right:.75rem;
  bottom:.75rem;
  left:.75rem;
  max-height:min(19rem,48%);
  overflow-x:hidden;
  overflow-y:auto;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  pointer-events:auto;
}
.plan-focus-close { position:absolute; z-index:3; top:.55rem; right:.55rem; display:grid; width:1.7rem; height:1.7rem; place-items:center; padding:0; border:1px solid rgba(255,255,255,.18); border-radius:999px; background:rgba(9,13,21,.84); color:#fff; font-size:1.1rem; line-height:1; }
.plan-focus-close:hover,.plan-focus-close:focus-visible { border-color:var(--bs-primary); background:rgba(var(--bs-primary-rgb),.2); }
.plan-focus-drawer .costume-plan-line-copy { padding-right:2rem; }
.plan-focus-drawer #planFocusContent,
.plan-focus-drawer .costume-plan-line { width:100%; min-width:0; }
.plan-focus-drawer .costume-plan-line-copy #openResultsModalBtn { display:block; width:max-content; min-height:1.8rem; margin-top:.55rem; padding:.25rem .65rem; border:1px solid rgba(var(--bs-primary-rgb),.62); border-radius:999px; background:rgba(var(--bs-primary-rgb),.08); color:#b9d6ff; font-size:.68rem; font-weight:700; }
.plan-focus-drawer .costume-plan-line { border-color:rgba(var(--bs-primary-rgb),.64); background:rgba(9,13,21,.72); box-shadow:0 .8rem 2rem rgba(0,0,0,.36); backdrop-filter:blur(8px) saturate(112%); }
.feature-pin-bubble.is-plan-node { border-color:rgba(var(--bs-primary-rgb),.82); background:rgba(11,29,52,.88); }
.feature-pin-bubble[data-kind="material"].is-plan-node { border-color:rgba(255,196,103,.82); background:rgba(61,40,10,.88); }
.feature-pin-bubble.is-plan-active { z-index:4; box-shadow:0 0 0 2px #fff,0 0 0 4px var(--bs-primary),0 .35rem 1rem rgba(0,0,0,.45); }
.feature-pin-bubble.is-plan-extra { opacity:.78; border-style:dashed; }
.feature-pin-bubble.is-plan-extra:hover,.feature-pin-bubble.is-plan-extra:focus-visible,.feature-pin-bubble.is-plan-extra.active { opacity:1; filter:brightness(1.14); }
.feature-lane-heading.is-selected { box-shadow:0 0 0 2px #fff,0 0 0 4px rgba(190,132,255,.72),0 .3rem 1rem rgba(0,0,0,.38); }
.results-modal .modal-dialog { max-width:min(72rem,calc(100vw - 1rem)); }
.results-modal .modal-body { display:flex; flex-direction:column; padding:0; overflow:hidden; }
.results-modal-eyebrow { display:block; color:var(--bs-primary); font-size:.62rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.results-modal .modal-header { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:.75rem; }
.results-modal-header-actions { display:flex; align-items:center; justify-content:flex-end; gap:.75rem; margin-left:auto; }
.results-modal-header-actions .btn-close { margin:0; }
.results-modal #resultsDock { display:grid !important; grid-template-rows:auto minmax(0,1fr) auto !important; min-height:16rem; height:min(48vh,32rem) !important; max-height:min(48vh,32rem) !important; overflow:hidden !important; border:0; border-radius:0; }
.results-modal #resultsScroll.table-responsive { height:auto !important; min-height:0 !important; max-height:none !important; overflow:auto !important; overscroll-behavior:contain !important; }
.shopping-options-modal .modal-dialog { max-width:min(64rem,calc(100vw - 1rem)); }
.shopping-options-modal .modal-header { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:.75rem; }
.shopping-options-modal .modal-body { display:grid; gap:.75rem; padding:.75rem; }
.shopping-options-modal-eyebrow { display:block; color:var(--bs-primary); font-size:.62rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.shopping-options-header-actions { display:flex; align-items:center; gap:.7rem; }
.shopping-options-header-actions .btn-close { margin:0; }
.show-search-query-btn { display:grid; width:1.75rem; height:1.75rem; place-items:center; padding:0; border:1px solid rgba(var(--bs-primary-rgb),.7); border-radius:999px; background:rgba(var(--bs-primary-rgb),.12); color:#b9d6ff; font-weight:800; line-height:1; }
.show-search-query-btn:hover,.show-search-query-btn:focus-visible,.show-search-query-btn[aria-expanded="true"] { background:var(--bs-primary); color:#fff; }
.search-query-disclosure { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:baseline; gap:.35rem .65rem; padding:.6rem .75rem; border:1px solid rgba(var(--bs-primary-rgb),.4); border-radius:.65rem; background:rgba(var(--bs-primary-rgb),.08); }
.search-query-disclosure > span { color:var(--bs-secondary-color); font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.search-query-disclosure code { min-width:0; color:var(--bs-body-color); overflow-wrap:anywhere; }
.shopping-options-modal #shoppingOptionsWorkspace { margin:0; }
.shopping-options-modal #componentTabsContainer { position:static !important; inset:auto !important; z-index:auto !important; padding:0; background:transparent; }

@media (max-width:767.98px) {
  .app-header { align-items:center; flex-wrap:nowrap; gap:.6rem; }
  .app-brand { flex:1 1 auto; }
  .image-workspace-toolbar { flex:0 1 auto; flex-wrap:nowrap; justify-content:flex-end; min-width:0; padding-top:0; }
  .image-workspace-toolbar button { flex:none; }
  #previewContainer.has-unified-plan { height:min(76vh,44rem); max-height:76vh; }
  #previewContainer.has-unified-plan img { max-height:76vh; }
  .plan-focus-drawer { right:.35rem; bottom:.35rem; left:.35rem; max-height:52%; padding:0; }
  .plan-focus-drawer .costume-plan-line { grid-template-columns:3.4rem minmax(0,1fr) auto; }
  .plan-focus-drawer .costume-plan-line-copy { grid-column:1/-1; min-width:0; }
  .plan-focus-drawer .costume-plan-carousel-shell,
  .plan-focus-drawer .costume-plan-carousel-actions { grid-column:1/-1; }
  .plan-focus-drawer .costume-plan-carousel-actions { padding-left:0; }
  .results-modal .modal-dialog { align-items:flex-end; min-height:100%; margin:0; }
  .results-modal .modal-content { max-height:92dvh; border-radius:1rem 1rem 0 0; }
  .results-modal #resultsDock { min-height:14rem; height:44dvh !important; max-height:44dvh !important; }
  .shopping-options-modal .modal-dialog { align-items:flex-end; min-height:100%; margin:0; }
  .shopping-options-modal .modal-content { max-height:92dvh; border-radius:1rem 1rem 0 0; }
  .shopping-options-modal .modal-body { padding:.5rem; }
  .shopping-setup .shopping-options-workspace > summary { display:grid; grid-template-columns:minmax(0,1fr); gap:.18rem; align-items:start; padding-right:2.5rem; }
  .shopping-setup .shopping-detail { width:100%; margin:0; line-height:1.35; }
  .search-query-disclosure { grid-template-columns:minmax(0,1fr); gap:.15rem; }
}

@media (min-width:576px) and (max-width:767.98px) {
  .app-header { display:grid; grid-template-columns:minmax(0,1fr); align-items:start; }
  .app-brand { min-width:0; }
  .image-workspace-toolbar { width:100%; max-width:100%; justify-content:flex-start; }
}

@media (max-width:575.98px) {
  .app-header { display:grid; min-height:3rem; grid-template-columns:auto minmax(0,1fr); align-items:start; margin-bottom:.75rem; }
  .app-brand { flex:0 0 auto; }
  .app-brand-copy { display:none; }
  .app-brand-icon { display:block; }
  .app-header:not(:has(.image-workspace-toolbar:not(.d-none))) { grid-template-columns:minmax(0,1fr); }
  .app-header:not(:has(.image-workspace-toolbar:not(.d-none))) .app-brand-copy { display:block; }
  .app-header:not(:has(.image-workspace-toolbar:not(.d-none))) .app-brand-icon { display:none; }
  .image-workspace-toolbar { width:max-content; max-width:100%; flex-direction:row; flex-wrap:nowrap; align-items:center; justify-self:end; gap:.25rem; margin-left:0; }
  .image-workspace-toolbar button { max-width:100%; justify-content:center; gap:.25rem; padding:.4rem .5rem; font-size:.7rem; }
  .action-label-full { display:none; }
  .action-label-compact { display:inline; }
  .reference-help-bubble { width:min(22rem,calc(100vw - 3rem)); }
  .shopping-mode-tab { padding:.7rem .3rem; gap:0; }
  .shopping-mode-tab strong { font-size:.96rem; }
  .shopping-mode-tab span { font-size:.72rem; }
  .shopping-mode-panel { padding:.8rem; }
  #componentTabs, #materialsTabs { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem; overflow:visible !important; padding:0; margin:0; }
  #componentTabs .nav-item, #materialsTabs .nav-item { min-width:0; }
  #componentTabs .nav-link, #materialsTabs .nav-link { width:100%; min-width:0; max-width:none; min-height:3.75rem; padding:.5rem .55rem; font-size:.82rem; line-height:1.2; text-align:left; justify-content:flex-start; overflow-wrap:anywhere; }
  #componentTabs .nav-link > span, #materialsTabs .nav-link > span { min-width:0; }
  .shopping-setup .search-term-toggles { grid-template-columns:minmax(0,1fr); }
  .shopping-setup .refine-target-card .input-group { grid-template-columns:minmax(0,1fr) minmax(0,1fr); width:calc(100% - 1.6rem) !important; margin-inline:.8rem !important; }
  .shopping-setup .refine-target-card .input-group > input { grid-column:1/-1; }
  .shopping-setup .refine-target-card .input-group > button { width:100%; }
  .shopping-setup .refine-search-terms { margin-inline:.8rem; }
  .price-range-group { grid-template-columns:auto minmax(0,1fr) auto; gap:.25rem .5rem; }
  .price-range-heading > span { grid-column:1/3; }
  .price-range-heading output { grid-column:3; }
  .price-range-control { grid-column:1/4; grid-row:2; margin-inline:.35rem; }
  .price-range-scale { display:none; }
  .costume-plan-heading { display:grid; grid-template-columns:minmax(0,1fr); gap:.55rem; }
  .costume-plan-heading > div { min-width:0; }
  #costumePlanTotal { justify-self:start; white-space:normal; font-size:.9rem; }
  .costume-plan-line { grid-template-columns:3.75rem minmax(0,1fr) auto; align-items:start; }
  .costume-plan-line-copy { grid-column:1/-1; }
  .costume-plan-thumbnail { width:3.75rem; height:3.75rem; }
  .costume-plan-price { align-self:start; padding-top:.1rem; }
  .costume-plan-carousel-shell { grid-column:1/-1; grid-template-columns:minmax(0,1fr); }
  .costume-plan-carousel { grid-auto-columns:88%; padding-bottom:.25rem; }
  .costume-plan-carousel-card { grid-template-columns:3.75rem minmax(0,1fr); }
  .costume-plan-carousel-thumbnail { width:3.75rem; height:3.75rem; }
  .costume-plan-carousel-step { display:none; }
  .costume-plan-carousel-actions { grid-column:1/-1; padding-left:0; }
  .plan-department-options { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:359.98px) {
  .app-brand-icon { width:2.65rem; height:2.45rem; }
  .action-label-compact { display:none; }
  .image-workspace-toolbar button { width:2.35rem; height:2.35rem; justify-content:center; padding:0; }
}
.product-match-note {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255, 193, 7, .55);
  border-radius: 999px;
  color: #ffd86b;
  font-size: .72rem;
  line-height: 1.2;
  padding: .12rem .4rem;
}