/* Inkloom Bottle Studio */
.bs-root {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: none;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  color: #172033;
}

.bs-root.is-open { display: block; }
body.bs-open { overflow: hidden; }
.bs-root *, .bs-root *::before, .bs-root *::after { box-sizing: border-box; }

.bs-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 18, 36, 0.72);
  backdrop-filter: blur(7px);
}

.bs-panel {
  position: absolute;
  inset: clamp(10px, 2.2vh, 24px) clamp(10px, 2vw, 30px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(1460px, calc(100vw - 20px));
  margin: auto;
  overflow: hidden;
  background: #f3f1eb;
  border: 1px solid rgba(255, 255, 255, 0.64);
  border-radius: 24px;
  box-shadow: 0 38px 120px rgba(5, 12, 28, 0.56);
}

.bs-head {
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 72px;
  padding: 12px 18px;
  background: #fff;
  border-bottom: 1px solid #dedbd3;
}

.bs-brand-mark {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  color: #fff;
  background: #102a43;
  border-radius: 50%;
  font: 800 0.8rem/1 Inter, sans-serif;
  letter-spacing: -0.02em;
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.12);
}

.bs-heading { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.bs-heading span { color: #8a6d2f; font-size: .7rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.bs-heading strong { overflow: hidden; font: 700 clamp(.95rem, 1.6vw, 1.25rem)/1.3 Inter, sans-serif; text-overflow: ellipsis; white-space: nowrap; }

.bs-head-badges { display: flex; gap: 8px; }
.bs-head-badges span {
  padding: 6px 10px;
  color: #526071;
  background: #f4f6f8;
  border: 1px solid #e2e6ea;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
}

.bs-close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  padding: 0;
  color: #263548;
  background: #eef1f4;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
}
.bs-close:hover { color: #fff; background: #102a43; }
.bs-close svg { width: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.8; }

.bs-body { display: grid; grid-template-columns: 360px minmax(0, 1fr); min-height: 0; }

.bs-tools {
  overflow-y: auto;
  padding: 20px;
  background: #fbfaf7;
  border-right: 1px solid #dedbd3;
  scrollbar-width: thin;
}

.bs-tool-section { padding: 0 0 20px; }
.bs-tool-section + .bs-tool-section { padding-top: 20px; border-top: 1px solid #e1ded7; }
.bs-section-title { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.bs-section-title span { display: grid; place-items: center; width: 25px; height: 25px; color: #896b2d; background: #eee4cf; border-radius: 50%; font-size: .67rem; font-weight: 800; }
.bs-section-title strong { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }

.bs-field, .bs-range { display: grid; gap: 6px; margin: 0 0 13px; }
.bs-field > span, .bs-range > span { color: #596477; font-size: .72rem; font-weight: 750; }
.bs-field select, .bs-field input[type="text"], .bs-field input[type="number"] {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  color: #172033;
  background: #fff;
  border: 1px solid #d7d9da;
  border-radius: 10px;
  font: 600 .8rem/1.2 Inter, sans-serif;
  outline: none;
}
.bs-field select:focus, .bs-field input:focus { border-color: #b28c3b; box-shadow: 0 0 0 3px rgba(178,140,59,.14); }
.bs-field-hint { color: #7a8496; font-size: .68rem; font-weight: 600; line-height: 1.35; }
.bs-two-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bs-two-fields.is-compact { align-items: end; }

.bs-swatches { display: flex; flex-wrap: wrap; gap: 9px; padding-top: 3px; }
.bs-swatches button {
  position: relative;
  width: 32px;
  height: 32px;
  padding: 0;
  background: var(--swatch);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #c9cdd1;
  cursor: pointer;
}
.bs-swatches button.is-active { box-shadow: 0 0 0 2px #102a43, 0 0 0 5px rgba(16,42,67,.12); }

.bs-upload {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 62px;
  margin-bottom: 13px;
  padding: 10px 12px;
  background: #fff;
  border: 1.5px dashed #bfc5ca;
  border-radius: 12px;
  cursor: pointer;
}
.bs-upload:hover { border-color: #b28c3b; background: #fffdf7; }
.bs-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.bs-upload svg { width: 25px; flex: none; fill: none; stroke: #8a6d2f; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.bs-upload span { display: flex; min-width: 0; flex-direction: column; }
.bs-upload strong { overflow: hidden; max-width: 238px; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.bs-upload small { margin-top: 2px; color: #7a8491; font-size: .67rem; }
.bs-colour-input { width: 100%; height: 42px; padding: 4px; background: #fff; border: 1px solid #d7d9da; border-radius: 10px; cursor: pointer; }

.bs-range > span { display: flex; justify-content: space-between; }
.bs-range output { color: #8a6d2f; font-weight: 800; }
.bs-range input, .bs-angle input { width: 100%; accent-color: #102a43; cursor: ew-resize; }

.bs-stage {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  padding: 15px 18px 12px;
  background:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,.94), rgba(255,255,255,.32) 44%, transparent 68%),
    linear-gradient(145deg, #e8e9e8, #f4f1e9 58%, #e0e6ea);
}

.bs-stage-toolbar { z-index: 2; display: flex; align-items: center; gap: 14px; justify-content: space-between; }
.bs-interaction-hint { display: flex; align-items: center; gap: 7px; color: #647082; font-size: .7rem; }
.bs-interaction-hint strong { color: #27374b; }
.bs-orbit-icon { display: grid; place-items: center; width: 25px; height: 25px; color: #fff; background: #102a43; border-radius: 50%; font-size: .9rem; }
.bs-view-buttons { display: flex; gap: 5px; padding: 4px; background: rgba(255,255,255,.68); border: 1px solid rgba(180,185,188,.7); border-radius: 10px; backdrop-filter: blur(8px); }
.bs-view-buttons button { padding: 7px 10px; color: #536174; background: transparent; border: 0; border-radius: 7px; font: 700 .67rem/1 Inter, sans-serif; cursor: pointer; }
.bs-view-buttons button:hover, .bs-view-buttons button.is-active { color: #fff; background: #102a43; }

.bs-canvas-wrap { position: relative; min-height: 390px; overflow: hidden; }
.bs-canvas-wrap canvas { display: block; width: 100%; height: 100%; outline: none; touch-action: none; }
.bs-live-badge { position: absolute; top: 16px; left: 10px; display: flex; align-items: center; gap: 6px; padding: 6px 9px; color: #476052; background: rgba(250,255,251,.82); border: 1px solid rgba(100,143,111,.32); border-radius: 999px; font-size: .65rem; font-weight: 800; backdrop-filter: blur(7px); pointer-events: none; }
.bs-live-badge i { width: 7px; height: 7px; background: #3f9860; border-radius: 50%; box-shadow: 0 0 0 4px rgba(63,152,96,.13); }

.bs-reference { position: absolute; right: 10px; bottom: 12px; width: 116px; margin: 0; overflow: hidden; background: rgba(255,255,255,.83); border: 1px solid rgba(255,255,255,.9); border-radius: 12px; box-shadow: 0 10px 28px rgba(17,31,50,.15); backdrop-filter: blur(6px); pointer-events: none; }
.bs-reference img { display: block; width: 100%; height: 87px; aspect-ratio: 4 / 3; object-fit: contain; }
.bs-reference figcaption { padding: 5px 7px; color: #6e7884; border-top: 1px solid #e6e7e6; font-size: .58rem; font-weight: 700; text-align: center; text-transform: uppercase; }

.bs-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 9px; color: #415065; background: rgba(238,239,236,.72); font-size: .76rem; font-weight: 700; backdrop-filter: blur(3px); }
.bs-loading[hidden] { display: none; }
.bs-loading span { width: 18px; height: 18px; border: 2px solid #c5c9cc; border-top-color: #102a43; border-radius: 50%; animation: bs-spin .7s linear infinite; }
@keyframes bs-spin { to { transform: rotate(360deg); } }

.bs-angle { display: grid; gap: 3px; width: min(620px, 78%); margin: 2px auto 0; }
.bs-angle > span { display: flex; align-items: center; justify-content: space-between; color: #5f6b7c; font-size: .69rem; }
.bs-angle output { color: #102a43; font-weight: 800; }

.bs-foot { display: flex; align-items: center; gap: 18px; min-height: 78px; padding: 12px 18px; background: #fff; border-top: 1px solid #dedbd3; }
.bs-order-summary { display: grid; min-width: 255px; }
.bs-order-summary span { overflow: hidden; max-width: 340px; color: #677284; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.bs-order-summary strong { margin-top: 1px; color: #112942; font: 800 1.2rem/1.25 Inter, sans-serif; }
.bs-order-summary small { color: #7f8895; font-size: .63rem; }
.bs-proof-note { display: flex; align-items: center; gap: 8px; margin-left: auto; color: #4e5d6d; font-size: .68rem; font-weight: 650; }
.bs-proof-note svg { width: 25px; height: 25px; padding: 5px; color: #8a6d2f; background: #f3ead7; border-radius: 50%; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.bs-submit { display: flex; align-items: center; justify-content: center; gap: 18px; min-width: 245px; min-height: 48px; padding: 10px 17px; color: #fff; background: #c45243; border: 0; border-radius: 12px; box-shadow: 0 9px 24px rgba(196,82,67,.24); font: 800 .8rem/1.2 Inter, sans-serif; cursor: pointer; }
.bs-submit:hover { background: #a94336; transform: translateY(-1px); }
.bs-submit:disabled { opacity: .68; cursor: wait; transform: none; }
.bs-submit span { font-size: 1.2rem; }

.bs-toast { position: absolute; left: 50%; bottom: 94px; z-index: 5; padding: 9px 16px; color: #fff; background: #102a43; border-radius: 999px; opacity: 0; transform: translate(-50%, 8px); transition: opacity .18s, transform .18s; pointer-events: none; font-size: .75rem; font-weight: 700; }
.bs-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 980px) {
  .bs-panel { inset: 0; width: 100%; border: 0; border-radius: 0; }
  .bs-body { grid-template-columns: 310px minmax(0, 1fr); }
  .bs-head-badges { display: none; }
  .bs-proof-note { display: none; }
}

@media (max-width: 760px) {
  .bs-panel { grid-template-rows: auto minmax(0, 1fr) auto; }
  .bs-head { min-height: 62px; padding: 8px 11px; }
  .bs-brand-mark { width: 39px; height: 39px; }
  .bs-body { display: flex; flex-direction: column; overflow-y: auto; }
  .bs-stage { order: -1; min-height: 58vh; padding: 10px; }
  .bs-stage-toolbar { align-items: flex-start; }
  .bs-interaction-hint > span:last-child { display: none; }
  .bs-view-buttons button { padding: 7px 8px; font-size: .62rem; }
  .bs-canvas-wrap { min-height: 390px; }
  .bs-reference { width: 86px; }
  .bs-reference img { height: 64px; }
  .bs-tools { overflow: visible; padding: 16px; border-top: 1px solid #dedbd3; border-right: 0; }
  .bs-angle { width: 92%; }
  .bs-foot { position: sticky; bottom: 0; z-index: 4; min-height: 72px; padding: 9px 11px; }
  .bs-order-summary { min-width: 0; flex: 1; }
  .bs-order-summary span { max-width: 42vw; }
  .bs-submit { min-width: 0; padding-inline: 14px; }
}

@media (max-width: 480px) {
  .bs-heading span { font-size: .58rem; }
  .bs-heading strong { font-size: .84rem; }
  .bs-stage { min-height: 54vh; }
  .bs-canvas-wrap { min-height: 340px; }
  .bs-view-buttons button:nth-child(-n+2) { display: none; }
  .bs-order-summary small { display: none; }
  .bs-submit { max-width: 48%; font-size: .72rem; }
}

@media (prefers-reduced-motion: reduce) {
  .bs-submit, .bs-toast { transition: none; }
  .bs-loading span { animation-duration: 1.4s; }
}

/* ----- 2D wrap designer ----- */
.bs-stage { display: flex; flex-direction: column; gap: 10px; }
.bs-stage [hidden] { display: none !important; }

.bs-mode-switch { display: inline-flex; gap: 4px; align-self: center; padding: 4px; background: rgba(255,255,255,.72); border: 1px solid rgba(180,185,188,.7); border-radius: 999px; backdrop-filter: blur(8px); }
.bs-mode-switch button { padding: 7px 18px; color: #536174; background: transparent; border: 0; border-radius: 999px; font: 700 .72rem/1 Inter, sans-serif; cursor: pointer; }
.bs-mode-switch button.is-active { color: #fff; background: #102a43; }

.bs-design-wrap { position: relative; display: grid; place-items: center; min-height: 0; flex: 1 1 auto; overflow: auto; padding: 8px; }
canvas[data-bs-design] { width: 100%; max-width: 820px; max-height: 100%; aspect-ratio: 2 / 1; height: auto; background: #fff; border-radius: 14px; box-shadow: 0 12px 34px rgba(17,31,50,.16); touch-action: none; cursor: crosshair; }
.bs-design-hint { position: absolute; left: 50%; bottom: 6px; margin: 0; padding: 4px 10px; color: #61707f; background: rgba(255,255,255,.72); border-radius: 999px; font-size: .64rem; font-weight: 700; transform: translateX(-50%); pointer-events: none; }

.bs-canvas-wrap { flex: 1 1 auto; }

.bs-layouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.bs-layouts button { padding: 8px 5px; color: #536174; background: #fff; border: 1px solid #d7d9da; border-radius: 9px; font: 700 .67rem/1.1 Inter, sans-serif; cursor: pointer; }
.bs-layouts button:hover { border-color: #b28c3b; }
.bs-layouts button.is-active { color: #fff; background: #102a43; border-color: #102a43; }

.bs-layers { display: grid; gap: 6px; margin: 0 0 13px; }
.bs-layer-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #fff; border: 1px solid #d7d9da; border-radius: 9px; cursor: pointer; }
.bs-layer-row:hover { border-color: #b6bdc3; }
.bs-layer-row.is-active { border-color: #2f6bff; box-shadow: 0 0 0 2px rgba(47,107,255,.14); }
.bs-layer-name { flex: 1; color: #2a3647; font: 700 .72rem/1 Inter, sans-serif; }
.bs-layer-remove { width: 22px; height: 22px; flex: none; padding: 0; color: #97a0ad; background: transparent; border: 0; border-radius: 6px; font-size: .78rem; cursor: pointer; }
.bs-layer-remove:hover { color: #fff; background: #c45243; }

.bs-selected { padding: 12px; margin: 0 0 13px; background: #fff; border: 1px solid #e1ded7; border-radius: 12px; }
.bs-selected .bs-range { margin-bottom: 10px; }
.bs-selected .bs-range:last-of-type { margin-bottom: 12px; }
.bs-layer-actions { display: flex; gap: 6px; }
.bs-layer-actions button { flex: 1; padding: 8px 4px; color: #536174; background: #f4f6f8; border: 1px solid #e2e6ea; border-radius: 8px; font: 700 .64rem/1 Inter, sans-serif; cursor: pointer; }
.bs-layer-actions button:hover { color: #fff; background: #102a43; border-color: #102a43; }
.bs-layer-actions button.is-danger:hover { background: #c45243; border-color: #c45243; }

@media (max-width: 760px) {
  .bs-design-wrap { min-height: 300px; }
  .bs-mode-switch button { padding: 7px 14px; font-size: .68rem; }
}