/* Sheet metal bending tool — layout and component styles (light theme).
   Header stays dark; everything else uses the light palette. */

/* ── App shell ───────────────────────────────────────────────────────────────*/

body {
  font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #f8f9fa;
  color: #1a1a2e;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
}

/* ── Header (intentionally dark, like the roof estimator) ────────────────────*/

header {
  background: #181825;
  padding: 0.384rem 1.2rem;
  border-bottom: 1px solid #313244;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

header h1 {
  font-size: 0.95rem;
  font-weight: 700;
  color: #cba6f7;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  flex: 1;
}

/* theme-toggle-btn base styles in shared.css */
.theme-toggle-btn {
  margin-left: auto;
}

.header-back {
  font-size: 0.75rem;
  color: #6c7086;
  text-decoration: none;
  transition: color 0.12s;
}
.header-back:hover { color: #cba6f7; }

/* ── Wizard progress bar ─────────────────────────────────────────────────────*/

#wizard-progress-bar {
  flex-shrink: 0;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  overflow: hidden;
  max-height: 120px;
  opacity: 1;
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.35s ease;
}

#wizard-progress-bar.pb-hidden {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  border-bottom-width: 0;
}

/* Mobile: fade out only — no height collapse so grid stays stable */
#wizard-progress-bar.pb-fade {
  opacity: 0;
  pointer-events: none;
}

.wizard-progress {
  display: flex;
  align-items: flex-start;
  padding: 0.7rem 2rem 0.4rem;
  gap: 0;
}

.wizard-step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  flex-shrink: 0;
  min-width: 60px;
}

.wizard-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #f3f4f6;
  border: 2px solid #d1d5db;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: #9ca3af;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.wizard-step-item.active .wizard-dot {
  border-color: #7c3aed;
  color: #7c3aed;
  background: #f3f0ff;
}

.wizard-step-item.done .wizard-dot {
  background: #7c3aed;
  border-color: #7c3aed;
  color: #ffffff;
}

.wizard-step-label {
  font-size: 0.6rem;
  color: #9ca3af;
  text-align: center;
  white-space: nowrap;
}

.wizard-step-item.active .wizard-step-label {
  color: #7c3aed;
  font-weight: 600;
}

.wizard-step-item.done .wizard-step-label {
  color: #6b7280;
}

.wizard-connector {
  flex: 1;
  height: 2px;
  background: #e5e7eb;
  margin-top: 12px;
  transition: background 0.2s;
}

.wizard-connector.done {
  background: #7c3aed;
}

/* ── Wizard content ──────────────────────────────────────────────────────────*/

#wizard-content {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.wizard-step-page {
  display: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.wizard-step-page.hidden {
  display: none !important;
}

/* Step 1: centered form */
.wizard-step-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  padding: 2.5rem 1.5rem;
  background: #f8f9fa;
}

.wizard-form-section {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Step 2: profile editor — full area */
.wizard-step-editor {
  display: block;
  overflow: hidden;
}

/* Step 3: wide review */
.wizard-step-wide {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  padding: 1.5rem;
  background: #f8f9fa;
}

.wizard-step-wide > * {
  width: 100%;
  max-width: 760px;
  margin-bottom: 1.5rem;
}

/* ── Wizard nav bar ──────────────────────────────────────────────────────────*/

#wizard-nav-bar {
  flex-shrink: 0;
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
  padding: 0.6rem 1.5rem;
}

.wizard-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wizard-btn {
  padding: 0.42rem 1.2rem;
  border-radius: 6px;
  font-size: 0.82rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s, opacity 0.12s;
}

.wizard-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.wizard-btn-back {
  background: transparent;
  border: 1px solid #d1d5db;
  color: #6b7280;
}

.wizard-btn-back:not(:disabled):hover {
  background: #f3f4f6;
  color: #1a1a2e;
}

.wizard-btn-next {
  background: #7c3aed;
  border: 1px solid #7c3aed;
  color: #ffffff;
  font-weight: 700;
}

.wizard-btn-next:not(:disabled):hover {
  background: #6d28d9;
  border-color: #6d28d9;
}

.wizard-btn-next:disabled {
  background: #d1d5db;
  border-color: #d1d5db;
  color: #9ca3af;
}

.wizard-btn-print {
  background: #16a34a;
  border-color: #16a34a;
  color: #ffffff;
}

.wizard-btn-print:not(:disabled):hover {
  background: #15803d;
  border-color: #15803d;
}

/* ── Step 1: order form ──────────────────────────────────────────────────────*/

.order-form-title {
  font-size: 1rem;
  font-weight: 700;
  color: #1a1a2e;
}

.order-form-desc {
  font-size: 0.83rem;
  color: #6b7280;
}

.order-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.order-form-label {
  font-size: 0.875rem;
  font-weight: 400;
  color: #374151;
}

.order-form-input {
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 5px;
  color: #1a1a2e;
  font-size: 0.88rem;
  padding: 0.5rem 0.7rem;
  width: 100%;
  transition: border-color 0.12s;
}

.order-form-input:focus {
  outline: none;
  border-color: #7c3aed;
}

.order-form-input::placeholder {
  color: #9ca3af;
}

/* ── Step 2: catalog panel ───────────────────────────────────────────────────*/

#catalog-panel {
  grid-area: catalog;
  background: #ffffff;
  border-right: 1px solid #e5e7eb;
  overflow-y: auto;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pe-desk-create-btn {
  display: flex;
  justify-content: center;
  width: calc(100% - 1rem);
  margin: 0.6rem 0.5rem 0.25rem;
}

/* Generuoti JSON — identiškas dydis, rodomas tik desktop create mode */
.pe-desk-gen-btn {
  display: none;
  justify-content: center;
  width: calc(100% - 1rem);
  margin: 0 0.5rem 0.25rem;
}
@media (min-width: 861px) {
  .pe-desk-mode--create .pe-desk-gen-btn { display: flex; }
}

.catalog-panel-title {
  font-size: 0.65rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.catalog-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.catalog-card {
  width: 100%;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  cursor: pointer;
  padding: 0.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  transition: border-color 0.12s, background 0.12s;
  text-align: center;
}

.catalog-card:hover {
  background: #f3f4f6;
  border-color: #7c3aed;
}

.catalog-card--active {
  border-color: #7c3aed;
  background: #f3f0ff;
}

.catalog-thumb {
  width: 110px;
  height: 72px;
  background: #fff;
  border-radius: 4px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
  color: #1a1a2e;
}

.catalog-thumb svg { display: block; width: 100%; height: 100%; }

.catalog-card-name {
  font-size: 0.7rem;
  color: #6b7280;
  font-weight: 500;
  word-break: break-word;
  line-height: 1.3;
}

.catalog-card--active .catalog-card-name {
  color: #7c3aed;
  font-weight: 700;
}

/* ── Profile variant cards (catalog thumbnails) ──────────────────────────────*/

.catalog-group-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: 0.78rem;
  font-weight: 500;
  color: #374151;
  letter-spacing: 0;
  padding: 0.3rem 0.4rem;
  background: none;
  border: none;
  border-bottom: 1px solid #e5e7eb;
  cursor: pointer;
  border-radius: 0;
  transition: color 0.12s, background 0.1s;
  white-space: nowrap;
  overflow: hidden;
}
.catalog-group-name span {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.catalog-group-name:hover { color: #111827; background: #f9fafb; }
.catalog-group-name:first-child { border-top: 1px solid #e5e7eb; }

.catalog-group-chevron {
  flex-shrink: 0;
  transition: transform 0.18s ease;
  opacity: 0.45;
}
.catalog-group-name:hover .catalog-group-chevron { opacity: 0.7; }
.catalog-group-name.is-open .catalog-group-chevron { transform: rotate(180deg); }

.profile-variants-grid {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.26s cubic-bezier(0.4, 0, 0.2, 1),
              padding 0.26s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0;
}
.profile-variants-grid.is-open {
  grid-template-rows: 1fr;
  padding: 5px 0 10px;
}

.profile-variants-grid-inner {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
  overflow: hidden;
}

/* Nested subcategories (e.g. Vėjalentė → Apatinė / Viršutinė / Vienos dalies): the category
   inner stacks subgroup headers + each subgroup's own card grid instead of a flat card grid. */
.profile-variants-grid-inner--nested {
  display: block;
}
.catalog-subgroup-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: 0.74rem;
  font-weight: 500;
  color: #6b7280;
  padding: 0.28rem 0.4rem 0.28rem 0.85rem; /* indented under the category */
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  transition: color 0.12s, background 0.1s;
}
.catalog-subgroup-name span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.catalog-subgroup-name:hover { color: #374151; background: #f9fafb; }
.catalog-subgroup-name .catalog-group-chevron { opacity: 0.4; }
.catalog-subgroup-name.is-open .catalog-group-chevron { transform: rotate(180deg); }
.profile-variants-grid-inner--nested .profile-variants-grid.is-open { padding: 4px 0 8px 0.85rem; }
body.dark .catalog-subgroup-name { color: #a6adc8; }
body.dark .catalog-subgroup-name:hover { color: #cdd6f4; background: #313244; }

.profile-variant-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 7px 5px 6px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #f9fafb;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
  min-width: 0;
}
.profile-variant-card:hover {
  background: #f3f4f6;
  border-color: #7c3aed;
}
.profile-variant-card.is-selected {
  border-color: #7c3aed;
  background: #f3f0ff;
  box-shadow: 0 0 0 2px color-mix(in srgb, #7c3aed 22%, transparent);
}

.profile-variant-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  min-height: 52px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 6px;
  background: #ffffff;
  color: #22242a;
}

.profile-variant-name {
  font-size: 0.68rem;
  font-weight: 600;
  color: #6b7280;
  text-align: center;
  line-height: 1.2;
}
.profile-variant-card.is-selected .profile-variant-name { color: #7c3aed; }

/* Thumbnail SVG — static, non-interactive */
.profile-svg--thumbnail {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.profile-svg--thumbnail * { pointer-events: none; }

/* ── Step 2: SVG panel ───────────────────────────────────────────────────────*/

#svg-panel {
  grid-area: svg;
  background: #fff;
  overflow: hidden;
  border-right: 1px solid #e5e7eb;
  position: relative;
  cursor: grab;
}

#svg-panel:active {
  cursor: grabbing;
}

#svg-panel svg {
  display: block;
  width: 100%;
  height: 100%;
  /* pan+zoom transform applied by JS: translate(panX,panY) scale(zoom), origin 0 0 */
}

/* ── Sidebar button (SVG panel top-left) ─────────────────────────────────────*/

.pe-sidebar-container {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 20;
}

.pe-sidebar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none !important;
  border-radius: 8px;
  background: transparent !important;
  box-shadow: none !important;
  color: #000000;
  cursor: pointer;
  transition: background 0.12s;
}

.pe-sidebar-btn svg {
  width: 38px;
  height: 38px;
  display: block;
}

.pe-sidebar-btn:hover {
  background: rgba(0, 0, 0, 0.08) !important;
}

body.dark .pe-sidebar-btn { color: #ffffff; }
body.dark .pe-sidebar-btn:hover { background: rgba(255, 255, 255, 0.12) !important; }

/* ── Canvas tools column (SVG panel top-right) ───────────────────────────────*/

.pe-canvas-tools-right {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}

/* Layers container is now inside the column — popup still anchors to it */
.svg-layers-container {
  position: relative;
}

/* Generic canvas tool button (rotate, flip, etc.) — ghost style, no background */
.pe-tool-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #000000;
  cursor: pointer;
}

body.dark .pe-tool-btn { color: #ffffff; }

/* Armed tool button (centre button double-tapped → auto-centre on every edit). The icon is an
   <img>, so `color` can't tint it — the lit state is carried by an accent pill + ring instead. */
.pe-tool-btn.is-active {
  background: rgba(124, 58, 237, 0.14);
  box-shadow: inset 0 0 0 1.5px #7c3aed;
}
body.dark .pe-tool-btn.is-active {
  background: rgba(203, 166, 247, 0.20);
  box-shadow: inset 0 0 0 1.5px #cba6f7;
}

.pe-tool-icon-light { display: block; }
.pe-tool-icon-dark  { display: none;  }
body.dark .pe-tool-icon-light { display: none;  }
body.dark .pe-tool-icon-dark  { display: block; }

/* Small rotate icon — invert for dark mode (SVG has black icon) */
.pe-rotate-small-icon { display: block; filter: none; }
body.dark .pe-rotate-small-icon { filter: invert(1); }

/* Zoom buttons — desktop only (mobile has pinch zoom) */
html.touch-device #pe-zoom-in-btn,
html.touch-device #pe-zoom-out-btn { display: none; }

/* ── Layers button + popup ───────────────────────────────────────────────────*/

.step-layers-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  transition: background 0.12s, box-shadow 0.12s;
}

.step-layers-btn:hover {
  background: #f3f4f6;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
}

.step-layers-btn img { display: block; }

.svg-layers-popup {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 210px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  /* Iššokimo animacija: display:none neanimuojamas, tad slepiama per visibility —
     popup išauga iš mygtuko kampo (origin viršus-dešinė), užsidaro kiek greičiau */
  transform-origin: top right;
  transition: opacity 0.22s ease, transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s;
}

.svg-layers-popup.hidden {
  opacity: 0;
  transform: translateY(-8px) scale(0.96);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}

.layers-popup-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  font-size: 0.78rem;
  font-weight: 700;
  color: #1a1a2e;
  letter-spacing: 0.04em;
}

.layers-popup-header img { opacity: 0.6; }

.svg-layers-list { padding: 0.3rem 0; }

.layer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0.9rem;
  cursor: pointer;
  user-select: none;
  transition: background 0.1s;
}

.layer-row:hover { background: #f3f4f6; }

.layer-label {
  font-size: 0.82rem;
  color: #374151;
}

/* Gabaritų autoringo poeilutės (tik kuriant naują šabloną) — įtrauktos giliau po
   pagrindinės „Gabaritų matmenys" eilutės, su plonu žymeklio brūkšniu kairėje */
.layer-row--sub { padding-left: 1.6rem; }
.layer-row--sub .layer-label { font-size: 0.78rem; color: #6b7280; }
body.dark .layer-row--sub .layer-label { color: #a6adc8; }

/* „Aukštis iki" viršūnės pasirinkimas — atitinka kiekio/kainos input stilių */
.pe-dims-hto {
  font-size: 0.8rem;
  padding: 0.15rem 0.3rem;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: #ffffff;
  color: #1a1a2e;
}
body.dark .pe-dims-hto {
  background: #313244;
  border-color: #45475a;
  color: #cdd6f4;
}

#pe-dims-author.hidden,
#pe-layer-dims-row.hidden { display: none; }

/* Toggle switch (reuses roof estimator pattern) */
.estimate-toggle {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 17px;
  flex-shrink: 0;
  cursor: pointer;
}

.estimate-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.estimate-toggle-slider {
  position: absolute;
  inset: 0;
  background: #d1d5db;
  border-radius: 17px;
  transition: background 0.2s;
}

.estimate-toggle-slider::before {
  content: '';
  position: absolute;
  width: 11px;
  height: 11px;
  top: 3px;
  left: 3px;
  background: #ffffff;
  border-radius: 50%;
  transition: transform 0.2s;
}

.estimate-toggle input:checked + .estimate-toggle-slider {
  background: #16a34a;
}

.estimate-toggle input:checked + .estimate-toggle-slider::before {
  transform: translateX(13px);
}

/* Zoom level indicator — bottom-right, fades in on interaction */
.zoom-indicator {
  position: absolute;
  bottom: 8px;
  right: 10px;
  font-size: 0.68rem;
  font-family: 'Inter', 'Segoe UI', sans-serif;
  color: #6b7280;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 0.1rem 0.38rem;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transition: opacity 0.35s;
  z-index: 10;
}

/* ── Step 2: editor panel (right column) ─────────────────────────────────────*/

#editor-panel {
  grid-area: editor;
  background: #f8f9fa;
  overflow-y: auto;
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* ── Step 2: mini-cart (bottom strip) ────────────────────────────────────────*/

#mini-cart-panel {
  grid-area: cart;
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
  padding: 0.4rem 0.75rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  overflow-x: auto;
  min-height: 52px;
  max-height: 72px;
  flex-shrink: 0;
}

.mini-cart-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  flex-shrink: 0;
  white-space: nowrap;
}

.mini-cart-empty {
  font-size: 0.78rem;
  color: #9ca3af;
  font-style: italic;
}

.mini-cart-item {
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  padding: 0.22rem 0.55rem 0.22rem 0.7rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  white-space: nowrap;
}

.mini-cart-item-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: #1a1a2e;
}

.mini-cart-item-detail {
  font-size: 0.7rem;
  color: #6b7280;
}

.mini-cart-remove {
  background: transparent;
  border: none;
  color: #9ca3af;
  font-size: 0.65rem;
  cursor: pointer;
  padding: 0 0.1rem;
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.1s;
}
.mini-cart-remove:hover { color: #dc2626; }

/* ── Editor section components ───────────────────────────────────────────────*/

.editor-section {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.editor-section-title {
  font-size: 0.65rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.seg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.seg-table th {
  text-align: left;
  font-size: 0.68rem;
  font-weight: 600;
  color: #6b7280;
  padding: 0.2rem 0.4rem;
  border-bottom: 1px solid #e5e7eb;
}

.seg-table td {
  padding: 0.2rem 0.4rem;
  border-bottom: 1px solid #f3f4f6;
  color: #374151;
}

.seg-label {
  font-weight: 700;
  color: #7c3aed;
  width: 28px;
}

.seg-angle {
  color: #9ca3af;
  font-size: 0.75rem;
  text-align: right;
}

.seg-angle-cell {
  display: flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}

.seg-k-label {
  font-weight: 700;
  color: #1a1a2e;
  flex-shrink: 0;
}


.seg-angle-input {
  width: 36px !important;
  text-align: right;
}

.seg-input {
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 3px;
  color: #1a1a2e;
  font-size: 0.82rem;
  padding: 0.18rem 0.35rem;
  width: 70px;
  text-align: right;
}

.seg-input:focus {
  outline: none;
  border-color: #7c3aed;
}

.seg-stepper {
  display: flex;
  align-items: center;
  gap: 1px;
}

.seg-stepper .seg-input {
  width: 46px;
}

.seg-stepper .seg-angle-input {
  width: 36px !important;
}

.stepper-unit {
  font-size: 0.75rem;
  color: #6b7280;
}

.stepper-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  min-height: 28px;
  padding: 0;
  border: 1px solid #d1d5db;
  border-radius: 3px;
  background: #f3f4f6;
  color: #374151;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
  touch-action: manipulation;
}

.stepper-btn:hover {
  background: #e5e7eb;
  border-color: #9ca3af;
}

.stepper-btn:active {
  background: #d1d5db;
}

.editor-unfolded {
  font-size: 0.78rem;
  color: #6b7280;
  padding: 0.25rem 0.4rem;
}

.editor-unfolded strong {
  color: #7c3aed;
}

.editor-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 0.75rem;
}

.editor-field {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}

.editor-field-label {
  font-size: 0.68rem;
  color: #6b7280;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.order-input-row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.order-input {
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 3px;
  color: #1a1a2e;
  font-size: 0.82rem;
  padding: 0.25rem 0.4rem;
  width: 100%;
}

.order-input--sm { width: 60px; }

.order-input:focus {
  outline: none;
  border-color: #7c3aed;
}

.order-input-unit {
  font-size: 0.72rem;
  color: #6b7280;
  flex-shrink: 0;
}

.editor-add-btn {
  margin-top: 0.25rem;
  align-self: stretch;
}

/* ── Mode toggle (Metražas / Vienetai) ───────────────────────────────────────*/

.mode-toggle-wrap {
  display: flex;
  border: 1px solid #d1d5db;
  border-radius: 5px;
  overflow: hidden;
}

.mode-btn {
  flex: 1;
  padding: 0.3rem 0.5rem;
  background: #f9fafb;
  border: none;
  cursor: pointer;
  font-size: 0.78rem;
  font-family: inherit;
  color: #6b7280;
  transition: background 0.12s, color 0.12s;
}

.mode-btn + .mode-btn {
  border-left: 1px solid #d1d5db;
}

.mode-btn.active {
  background: #7c3aed;
  color: #ffffff;
  font-weight: 600;
}

.mode-panel {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.1rem 0;
  flex-wrap: wrap;
}

/* btn-primary override for this tool's light theme */
.btn-primary {
  background: #7c3aed;
  color: #ffffff;
  border: none;
}
.btn-primary:hover { background: #6d28d9; }

/* ── Step 3: review ──────────────────────────────────────────────────────────*/

.review-header {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.review-header-title {
  font-size: 1rem;
  font-weight: 700;
  color: #1a1a2e;
}

.review-header-meta {
  font-size: 0.8rem;
  color: #6b7280;
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.review-header-meta span strong { color: #374151; }

.review-item {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  position: relative; /* anchors the remove ✕ button */
  transition: height 240ms ease, opacity 200ms ease, margin 240ms ease,
              padding 240ms ease, border-width 240ms ease;
}

/* Animated removal: JS freezes the card height, this collapses it to nothing. */
.review-item--removing {
  height: 0 !important;
  opacity: 0;
  margin: 0;
  padding: 0;
  border-width: 0;
  pointer-events: none;
}

.review-item-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #9ca3af;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
}
.review-item-remove:hover { color: #dc2626; background: #fef2f2; }
body.dark .review-item-remove { color: #6c7086; }
body.dark .review-item-remove:hover { color: #f38ba8; background: #313244; }

.review-item-svg {
  background: #fff;
  flex-shrink: 0;
  width: 240px;
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #e5e7eb;
}

/* 3D režimo piešinys ateina spausdinimo dydžio (460×270) — sutalpinam į kortelę be iškirpimo */
.review-item-svg svg { display: block; max-width: 100%; height: auto; }

.review-item-info {
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
}

.review-item-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: #1a1a2e;
}

.review-item-table {
  font-size: 0.78rem;
  width: 100%;
  border-collapse: collapse;
}

.review-item-table td {
  padding: 0.15rem 0;
  color: #374151;
  border: none;
}

.review-item-table td:first-child {
  color: #6b7280;
  width: 140px;
}

.review-item-table td strong { color: #7c3aed; }

/* ── Mobile ──────────────────────────────────────────────────────────────────*/

@media (max-width: 860px) {

  .catalog-card { min-width: 110px; flex-shrink: 0; }

  #svg-panel {
    min-height: 200px;
    max-height: 45vw;
    border-right: none;
    border-bottom: 1px solid #e5e7eb;
  }

  #editor-panel {
    max-height: none;
    border-bottom: 1px solid #e5e7eb;
  }

  #mini-cart-panel { max-height: 80px; }

  .editor-fields { grid-template-columns: 1fr; }

  .review-item { flex-direction: column; }

  .review-item-svg {
    width: 100%;
    min-height: 160px;
    border-right: none;
    border-bottom: 1px solid #e5e7eb;
  }
}

/* ── Print ───────────────────────────────────────────────────────────────────*/

@media print {
  .no-print { display: none !important; }
}

/* ── Mode selection ──────────────────────────────────────────────────────────*/

.mode-select-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  min-height: calc(100vh - 64px);
  gap: 2rem;
}

.mode-select-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #374151;
}

.mode-select-cards {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.mode-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 2rem 2.5rem;
  background: #ffffff;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
  width: 220px;
  text-align: center;
}

.mode-card:hover {
  border-color: #7c3aed;
  box-shadow: 0 4px 16px rgba(124,58,237,0.12);
  transform: translateY(-2px);
}

.mode-card-icon {
  font-size: 2.5rem;
}

.mode-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: #1a1a2e;
}

.mode-card-desc {
  font-size: 0.78rem;
  color: #6b7280;
  line-height: 1.4;
}

/* ── Profile editor ──────────────────────────────────────────────────────────*/

#profile-editor-wrap {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 64px);
  overflow: hidden;
}

.pe-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: #f0f1f7;
  border-bottom: 1px solid #d1d5db;
  flex-shrink: 0;
  flex-wrap: wrap;
}
body.dark .pe-toolbar { background: #1e1e2e; border-color: #313244; }

.pe-btn {
  padding: 0.3rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 5px;
  background: #ffffff;
  color: #374151;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
body.dark .pe-btn { background: #313244; border-color: #45475a; color: #cdd6f4; }

.pe-btn:hover { background: #f3f4f6; }
body.dark .pe-btn:hover { background: #45475a; }

/* Galų matmenys (taper) — plaukiojantis jungiklis tinklelio apačioje kairėje.
   Ikonos — savarankiški apvalūs ženkliukai (tamsus fonas įpieštas pačiame SVG),
   todėl mygtukas be fono/apvado; būsena rodoma keičiant near ↔ far ikoną. */
.pe-taper-fab {
  position: absolute;
  left: 0.6rem;
  bottom: calc(0.6rem + 52px); /* viršutinis lizdas — sukeista su 2D/3D mygtuku (2026-07-16) */
  z-index: 20;
  width: 46px;
  height: 46px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 50%;
}
.pe-taper-fab img { display: none; width: 100%; height: 100%; }
/* Trijų būsenų ciklas: išjungta — both-ends ikona; 1-a būsena (kopija TOLI,
   aukštyn-dešinėn) — far ikona; 2-a būsena (kopija ČIA, žemyn-kairėn) — near ikona.
   .is-far klasė žymi antrąją pusę (showTaper = -1). */
.pe-taper-fab .pe-taper-fab-off { display: block; }
.pe-taper-fab.is-on .pe-taper-fab-off { display: none; }
.pe-taper-fab.is-on:not(.is-far) .pe-taper-fab-far { display: block; }
.pe-taper-fab.is-on.is-far .pe-taper-fab-near { display: block; }
/* Aktyvumo žiedo nėra (vartotojo prašymas 2026-07-12) — būseną rodo pati ikona */

/* Taper kopijos tempimo rankenėlės ikona (drag-hand): SVG per <image> nepaveldi
   currentColor, tad tamsioje temoje apverčiama filtru, kad matytųsi ant tamsaus fono */
body.dark .pe-thandle { filter: invert(1); }
.pe-thandle { cursor: grab; }

.pe-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.pe-btn:disabled:hover { background: #ffffff; }
body.dark .pe-btn:disabled:hover { background: #313244; }

/* Inline SVG icon inside .pe-btn toolbar buttons */
.pe-btn-icon {
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.2em;
}

.pe-btn-primary {
  background: #7c3aed;
  border-color: #7c3aed;
  color: #fff;
}

.pe-btn-primary:hover {
  background: #6d28d9;
}

.pe-btn-flip {
  background: #eff6ff;
  border-color: #2563eb;
  color: #1d4ed8;
}
body.dark .pe-btn-flip { background: #1e3a5f; border-color: #2563eb; color: #93c5fd; }

.pe-btn-flip:hover { background: #dbeafe; }
body.dark .pe-btn-flip:hover { background: #1e40af; }

/* Hidden by default; shown only when desktop or mobile create mode is active */
.pe-name-input {
  display: none;
  flex: 1;
  min-width: 160px;
  max-width: 280px;
  padding: 0.3rem 0.6rem;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 5px;
  color: #1a1a2e;
  font-size: 0.82rem;
}
.pe-desk-mode--create .pe-name-input {
  display: flex;
}
body.dark .pe-name-input { background: #313244; border-color: #45475a; color: #cdd6f4; }

.pe-name-input::placeholder { color: #9ca3af; }
body.dark .pe-name-input::placeholder { color: #45475a; }

.pe-name-input:focus {
  outline: none;
  border-color: #7c3aed;
}

/* Stats flow ON from the toolbar buttons and take the remaining width, wrapping the breakdown
   across the full row and down onto the next lines (not squeezed into a narrow box). */
.pe-stats {
  flex: 1 1 12rem;
  min-width: 0;
  margin-left: 0.5rem;
  padding-top: 0.35rem; /* align the first line with the buttons' text (toolbar is flex-start) */
  font-size: 0.78rem;
  color: #374151;
  white-space: normal;
  line-height: 1.5;
}
body.dark .pe-stats { color: #6b7280; }
/* Keep buttons/name at the top when a long breakdown makes the stats span tall. */
.pe-toolbar { align-items: flex-start; }

/* Head (segment count + total) never breaks; the breakdown after it wraps at the slashes. */
.pe-unf-head { white-space: nowrap; }
.pe-unf-marks {
  color: #7c3aed;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
body.dark .pe-unf-marks { color: #cba6f7; }
.pe-unf-flip {
  /* Uploaded swap/flip icon as a mask so it takes the stats colour (currentColor) in both
     themes — no invert filter, no per-render inlining. */
  border: none;
  color: inherit;
  background-color: currentColor;
  -webkit-mask: url(../../assets/images/swap-flip-arrows-exact-traced-currentcolor.svg) center / contain no-repeat;
  mask: url(../../assets/images/swap-flip-arrows-exact-traced-currentcolor.svg) center / contain no-repeat;
  display: inline-block;
  width: 1.15rem;   /* icon aspect ≈ 1.47:1 (980×667) */
  height: 0.8rem;
  padding: 0;
  margin: 0 3px;
  vertical-align: -0.1em;
  cursor: pointer;
  opacity: 0.6;
}
.pe-unf-flip:hover { opacity: 1; }

.pe-svg-area {
  position: relative;
  flex: 1;
  overflow: hidden;
  background: #f0f1f7;
  touch-action: none;
}
body.dark .pe-svg-area { background: #1e1e2e; }

.pe-svg-area svg {
  display: block;
}

/* Radial endpoint menu */
.pe-radial-menu {
  position: absolute;
  width: 200px;
  height: 200px;
  transform: translate(-50%, -50%);
  z-index: 200;
  pointer-events: none;
}

.pe-radial-menu--hidden {
  display: none !important;
}

.pe-radial-bg {
  position: absolute;
  left: 60px; top: 60px;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: rgba(240, 241, 247, 0.95);
  border: 1.5px solid rgba(124, 58, 237, 0.35);
  pointer-events: all;
}
body.dark .pe-radial-bg { background: rgba(30,30,46,0.92); border-color: rgba(203,166,247,0.35); }

.pe-radial-btn {
  position: absolute;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  pointer-events: all;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 0.85;
  transition: opacity 0.15s;
}

.pe-radial-btn:hover {
  opacity: 1;
}

.pe-radial-btn img {
  width: 39px; height: 39px;
  object-fit: contain;
  display: block;
  transition: transform 0.15s ease;
}

.pe-radial-btn:hover img {
  transform: scale(1.15);
}


/* Button centers ON the circle arc: radius=40px from center(100,100), btn=44px, 4 buttons 90° apart */
/* Tęsti:      -90° (top)    → center(100, 60)  → left=78,  top=38  */
.pe-radial-btn--continue   { left: 78px;  top: 38px;  }
/* Tęstinis piešimas: 0° (right) → center(140,100) → left=118, top=78  */
.pe-radial-btn--continuous { left: 118px; top: 78px;  }
/* Undo:       90° (bottom) → center(100,140) → left=78,  top=118 */
.pe-radial-btn--undo       { left: 78px;  top: 118px; }
/* Užvarta:    180° (left)  → center(60, 100) → left=38,  top=78  */
.pe-radial-btn--hem        { left: 38px;  top: 78px;  }

/* Gabaritų galo meniu — du veiksmai vienas šalia kito, kairėje ir dešinėje centro */
.pe-radial-btn--dim-edit   { left: 38px;  top: 78px;  }
.pe-radial-btn--dim-flip   { left: 78px;  top: 38px;  }
.pe-radial-btn--dim-del    { left: 118px; top: 78px;  }

/* Profile editor body — catalog | canvas | segment panel */
.pe-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.pe-catalog-panel {
  width: 200px;
  min-width: 200px;
  flex-shrink: 0;
  background: #ffffff;
  border-right: 1px solid #e5e7eb;
  overflow-y: auto;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

body.dark .pe-catalog-panel {
  background: #181825;
  border-color: #45475a;
}
body.dark .pe-catalog-panel .catalog-panel-title { color: #585b70; }
body.dark .pe-catalog-panel .catalog-card         { background: #313244; border-color: #45475a; }
body.dark .pe-catalog-panel .catalog-card:hover   { background: #45475a; border-color: #7c3aed; }
body.dark .pe-catalog-panel .catalog-card--active { background: #2a1f3d; border-color: #7c3aed; }
body.dark .pe-catalog-panel .catalog-thumb        { background: #1e1e2e; border-color: #45475a; color: #cdd6f4; }
body.dark .pe-catalog-panel .catalog-card-name    { color: #a6adc8; }
body.dark .pe-catalog-panel .catalog-card--active .catalog-card-name { color: #cba6f7; }

/* Dark mode — variant cards */
body.dark .catalog-group-name               { color: #cdd6f4; border-bottom-color: #313244; }
body.dark .catalog-group-name:first-child   { border-top-color: #313244; }
body.dark .catalog-group-name:hover         { color: #ffffff; background: #313244; }
body.dark .profile-variant-card             { background: #313244; border-color: #45475a; }
body.dark .profile-variant-card:hover       { background: #45475a; border-color: #7c3aed; }
body.dark .profile-variant-card.is-selected { background: #2a1f3d; border-color: #7c3aed; }
body.dark .profile-variant-preview          { background: #1e1e2e; color: #cdd6f4; }
body.dark .profile-variant-name             { color: #a6adc8; }
body.dark .profile-variant-card.is-selected .profile-variant-name { color: #cba6f7; }

/* Segment panel */
.pe-seg-panel {
  width: 202px;
  min-width: 202px;
  background: #f9fafb;
  border-left: 1px solid #e5e7eb;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
body.dark .pe-seg-panel { background: #181825; border-color: #313244; }

.pe-sp-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.6rem 0.75rem 0.4rem;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
}
body.dark .pe-sp-title { border-color: #313244; }


.pe-sp-empty {
  padding: 1rem 0.75rem;
  font-size: 0.78rem;
  color: #9ca3af;
}
body.dark .pe-sp-empty { color: #45475a; }

.pe-order-section {
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
body.dark .pe-order-section { border-color: #313244; }

.pe-mode-toggle-wrap {
  display: flex;
  margin: 0 0.5rem;
}

.pe-mode-panel {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0 0.5rem;
  flex-wrap: wrap;
}

.pe-order-label {
  font-size: 0.72rem;
  color: #374151;
  white-space: nowrap;
}
body.dark .pe-order-label { color: #a6adc8; }

.pe-oi-note-input,
.pe-oi-color-input,
.pe-oi-slope-input {
  margin: 0 0.5rem 0.5rem;
  width: calc(100% - 1rem);
  box-sizing: border-box;
}

.pe-add-btn {
  margin: 0.25rem 0.5rem 0.75rem;
  width: calc(100% - 1rem);
  font-size: 0.78rem;
}

/* ── Snapshot button (profile PNG export) ────────────────────────────── */
.pe-snapshot-btn {
  display: block;
  width: calc(100% - 1.5rem);
  margin: 0.5rem 0.75rem 0.25rem;
  padding: 0.45rem 0.75rem;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  background: transparent;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  color: #6b7280;
  cursor: pointer;
  text-align: center;
  box-sizing: border-box;
}
.pe-snapshot-btn:hover   { border-color: #7c3aed; color: #7c3aed; }
.pe-snapshot-btn:disabled { opacity: 0.5; cursor: wait; }

/* Desktop variant — matches the pe-order-section padding */
.pe-snapshot-btn--desktop {
  width: calc(100% - 1rem);
  margin: 0.5rem 0.5rem 0.25rem;
}

body.dark .pe-snapshot-btn           { border-color: #45475a; color: #a6adc8; }
body.dark .pe-snapshot-btn:hover     { border-color: #cba6f7; color: #cba6f7; }

/* ── Template catalog accordion (left panel) ─────────────────────────── */

.pe-template-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.25rem 0;
}

/* Category buttons — same visual language as party-type-btn in roof estimator */
.pe-cat-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.42rem 0.65rem;
  background: #f9fafb;
  border: 1.5px solid #e5e7eb;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
body.dark .pe-cat-btn { background: #313244; border-color: #45475a; color: #cdd6f4; }

.pe-cat-btn::after       { content: '▸'; font-size: 0.6rem; color: #9ca3af; margin-left: 0.3rem; }
body.dark .pe-cat-btn::after { color: #6c7086; }
.pe-cat-btn--open::after { content: '▾'; color: #cba6f7; }
.pe-cat-btn:hover:not(.pe-cat-btn--open) { background: #f3f0ff; border-color: #7c3aed; color: #7c3aed; }
body.dark .pe-cat-btn:hover:not(.pe-cat-btn--open) { background: #3d3d5c; color: #cba6f7; }
.pe-cat-btn--open {
  background: #7c3aed;
  border-color: #7c3aed;
  color: #ffffff;
}

/* Variant sub-list */
.pe-variant-list {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.1rem 0 0.1rem 0.5rem;
  border-left: 2px solid #e5e7eb;
  margin-left: 0.5rem;
}
body.dark .pe-variant-list { border-color: #45475a; }
.pe-variant-list--hidden { display: none; }

.pe-variant-btn {
  width: 100%;
  padding: 0.3rem 0.6rem;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.73rem;
  color: #6b7280;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
body.dark .pe-variant-btn { background: #1e1e2e; border-color: #313244; color: #a6adc8; }

.pe-variant-btn:hover      { background: #f3f0ff; color: #7c3aed; border-color: #7c3aed; }
body.dark .pe-variant-btn:hover { background: #313244; color: #cdd6f4; border-color: #585b70; }
.pe-variant-btn--active    { background: #f3f0ff; border-color: #7c3aed; color: #7c3aed; }
body.dark .pe-variant-btn--active { background: #2a1f3d; border-color: #7c3aed; color: #cba6f7; }

/* ── Profile editor cart ────────────────────────────────────────────── */

.pe-cart-wrap {
  display: none;
}

.pe-cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0;
  border-top: 1px solid #d1d5db;
  margin-bottom: 0.5rem;
}
body.dark .pe-cart-header { border-color: #45475a; }

.pe-cart-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: #1a1a2e;
}
body.dark .pe-cart-title { color: #cdd6f4; }

.pe-cart-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pe-cart-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
}
body.dark .pe-cart-item { background: #1e1e2e; border-color: #313244; }

.pe-cart-item-svg {
  flex-shrink: 0;
  background: #f3f4f6;
  border-radius: 4px;
}
body.dark .pe-cart-item-svg { background: #181825; }

.pe-cart-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.pe-cart-item-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: #1a1a2e;
}
body.dark .pe-cart-item-name { color: #cdd6f4; }

.pe-cart-item-detail {
  font-size: 0.75rem;
  color: #374151;
}
body.dark .pe-cart-item-detail { color: #a6adc8; }

.pe-cart-item-note {
  font-style: italic;
  color: #9ca3af;
}
body.dark .pe-cart-item-note { color: #6c7086; }

.pe-cart-remove {
  flex-shrink: 0;
  font-size: 0.7rem;
  padding: 0.2rem 0.4rem;
  color: #f38ba8;
  border-color: #f38ba8;
}

.pe-sp-row {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.3rem 0.4rem;
  border-bottom: 1px solid #e5e7eb;
}
body.dark .pe-sp-row { border-color: #1e1e2e; }

.pe-sp-seg { background: #f9fafb; }
body.dark .pe-sp-seg { background: #1e1e2e; }

.pe-sp-hem { background: #f3f4f6; }
body.dark .pe-sp-hem { background: #1a1a2a; opacity: 0.8; }

.pe-sp-angle { background: #f0f1f7; }
body.dark .pe-sp-angle { background: #181825; }

.pe-sp-row--active {
  outline: 2px solid #7c3aed;
  outline-offset: -2px;
  border-radius: 6px;
}
body.dark .pe-sp-row--active { outline-color: #cba6f7; }

/* Hover highlight — mouse over a segment/corner in the drawing lights up its row.
   Softer than --active (1px) so a clicked selection still reads as the stronger state. */
.pe-sp-row--hover {
  background: #ddd6fe;
  outline: 1px solid #a78bfa;
  outline-offset: -1px;
  border-radius: 6px;
}
body.dark .pe-sp-row--hover {
  background: #37325a;
  outline-color: #8b7ff0;
}

/* Drawing-side hover highlight. These SVG elements are ALWAYS rendered (one per segment/label)
   but hidden until their .on class is toggled — baked in for drawing-hover, toggled by JS for
   side-panel hover WITHOUT a re-render, so the transitions below can animate both ways. */
/* .on = transient hover highlight (JS-toggled on panel hover / baked on drawing hover).
   .sel = persistent selection highlight (baked from selectedLabel) — stays until deselected,
   and is a SEPARATE class so the panel-hover toggle (which only touches .on) never clears it. */
.pe-hl-line {                        /* pink recolour line over a segment */
  opacity: 0;
  transition: opacity 120ms ease-out;
  pointer-events: none;
}
.pe-hl-line.on,
.pe-hl-line.sel { opacity: 1; }

.pe-lbl {                            /* S/K number on the drawing */
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 150ms ease-out, fill 120ms ease-out;
  pointer-events: none;
}
.pe-lbl.on,
.pe-lbl.sel {                        /* hovered/selected number: grow 30% + accent colour */
  transform: scale(1.3);
  fill: #7c3aed;
}
body.dark .pe-lbl.on,
body.dark .pe-lbl.sel { fill: #cba6f7; }

/* Painted-side arrow hover: the arrow grows ~20% and a "Spalvotoji pusė" label fades in beside
   its tail. The .on class comes from a JS hit-test, not CSS :hover — while hovering, the editor
   stops rebuilding the SVG and toggles .on on the LIVE element, so these transitions animate
   smoothly instead of flickering on every mousemove rebuild. Editor only. */
.pe-paint-arrow-shape {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 150ms ease-out;
}
.pe-paint-arrow-shape.on { transform: scale(1.2); }
.pe-paint-label {
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease-out;
}
.pe-paint-label.on { opacity: 1; }

/* Fade the drawing in when a different profile template is loaded (one-shot; the class is
   added to the freshly built <svg> only on the load render, so hover/edit renders don't replay). */
@keyframes pe-svg-enter { from { opacity: 0; } to { opacity: 1; } }
.pe-svg-enter { animation: pe-svg-enter 200ms ease-out; }

/* Metražas/Vienetai toggle: fade+slide the newly shown Kiekis panel in. */
@keyframes pe-panel-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.pe-mode-panel.pe-panel-anim { animation: pe-panel-in 190ms ease-out; }

/* ── Mobile catalog bar + sheet — hidden on desktop ─────────────────────── */
.pe-mob-cat-bar,
.pe-mob-cat-backdrop,
.pe-mob-cat-sheet { display: none; }

/* ── Cart FAB — mobile only (desktop uses pe-desktop-add-cart-btn) ─────────── */
.pe-mobile-cart-btn { display: none; }

/* ── Shared cart icon styles (used by both mobile FAB and desktop btn) ─────── */
.pe-mobile-cart-icon-wrapper {
  position: relative;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
}
.pe-mobile-cart-icon {
  display: block;
  width: 100%;
  height: 100%;
}
.pe-mobile-cart-badge {
  position: absolute;
  top: -7px;
  right: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 4px;
  box-sizing: border-box;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: #ef2b2d;
  color: #ffffff;
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
body.dark .pe-mobile-cart-badge { border-color: rgba(27, 27, 34, 0.96); }

/* ── Desktop cart button — transparent wrapper, full PNG image as visual ──── */
.pe-desktop-add-cart-btn {
  position: relative;
  display: block;
  width: calc(100% - 1rem);
  margin: 0.5rem 0.5rem;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  line-height: 0; /* removes gap under inline img */
  overflow: visible;
}
.pe-desktop-add-cart-btn:hover  { opacity: 0.88; }
.pe-desktop-add-cart-btn:active { opacity: 0.75; }
.pe-desktop-add-cart-btn.pe-btn-add--added { opacity: 0.55; }

/* Full-width image — preserves original proportions */
.pe-desktop-cart-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.pe-desktop-cart-img-dark  { display: none; }
body.dark .pe-desktop-cart-img-light { display: none; }
body.dark .pe-desktop-cart-img-dark  { display: block; }

.layers-icon-dark              { display: none !important; }
body.dark .layers-icon-light   { display: none !important; }
body.dark .layers-icon-dark    { display: block !important; }

/* Count badge — overlaid top-right corner, inside button bounds */
.pe-desktop-cart-count {
  position: absolute;
  top: 4px;
  right: 4px;
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  box-sizing: border-box;
  border-radius: 999px;
  background: #ef2b2d;
  color: #ffffff;
  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
.pe-desktop-cart-count:not(:empty) { display: flex; }

/* ── Order modal — hidden until opened ──────────────────────────────────── */
.pe-order-modal-backdrop {
  display: block;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.pe-order-modal-backdrop.pe-order-modal--open {
  opacity: 1;
  pointer-events: auto;
}
.pe-order-modal {
  display: block;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 301;
  border-radius: 20px 20px 0 0;
  background: #ffffff;
  box-shadow: 0 -4px 32px rgba(0,0,0,0.18);
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
body.dark .pe-order-modal { background: #1e1e2e; }
.pe-order-modal.pe-order-modal--open { transform: translateY(0); }

.pe-order-modal-handle {
  width: 40px;
  height: 4px;
  background: rgba(0,0,0,0.15);
  border-radius: 2px;
  margin: 10px auto 0;
}
body.dark .pe-order-modal-handle { background: rgba(255,255,255,0.25); }

.pe-order-modal-body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.5rem 0 0.75rem;
}
.pe-order-modal-body .pe-sp-title {
  display: block;
  border-color: rgba(0,0,0,0.1);
}
.pe-order-modal-body .pe-add-btn {
  margin: 0.25rem 0.75rem 0.5rem;
  width: calc(100% - 1.5rem);
}

/* Snapshot ("Foto") preview modal — centered dialog with Download + Share */
.pe-snap-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 320;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.pe-snap-modal-backdrop.pe-snap-modal--open { opacity: 1; pointer-events: auto; }
.pe-snap-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 321;
  width: min(92vw, 560px);
  max-height: 92vh;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.96);
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.pe-snap-modal.pe-snap-modal--open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.pe-snap-modal-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 92vh;
  padding: 16px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 12px 48px rgba(0,0,0,0.35);
}
body.dark .pe-snap-modal-inner { background: #1e1e2e; }
/* Kortelės formato jungiklis (segmentinis) — [Gamybinis lapas][Mobilus paveikslėlis] */
.pe-snap-format {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 10px;
  background: #eceff4;
}
body.dark .pe-snap-format { background: #313244; }
.pe-snap-fmt-btn {
  flex: 1;
  min-height: 44px; /* touch target */
  padding: 0 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #6b7280;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.pe-snap-fmt-btn.is-active {
  background: #ffffff;
  color: #1a1a2e;
  box-shadow: 0 1px 3px rgba(0,0,0,0.14);
}
.pe-snap-fmt-btn:disabled { opacity: 0.55; cursor: wait; }
body.dark .pe-snap-fmt-btn { color: #a6adc8; }
body.dark .pe-snap-fmt-btn.is-active { background: #45475a; color: #cdd6f4; }

.pe-snap-preview {
  display: block;
  width: 100%;
  height: auto;
  max-height: 60vh;
  object-fit: contain;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  transition: opacity 0.2s ease;
}
.pe-snap-preview.is-loading { opacity: 0.35; }
/* Vertikali (3:4) kortelė — dydį lemia AUKŠTIS, kitaip 100% pločio dėžutėje liktų juostos šonuose */
.pe-snap-modal--mobile .pe-snap-preview {
  width: auto;
  max-width: 100%;
  max-height: 62vh;
  margin: 0 auto;
}
.pe-snap-hint {
  font-size: 0.78rem;
  line-height: 1.3;
  text-align: center;
  color: #6b7280;
}
body.dark .pe-snap-hint { color: #a6adc8; }
.pe-snap-actions { display: flex; gap: 10px; }
.pe-snap-action {
  flex: 1;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.95rem;
  text-decoration: none;
  border-radius: 10px;
  cursor: pointer;
}
.pe-snap-close {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: #1e1e2e;
  color: #ffffff;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
body.dark .pe-snap-close { background: #45475a; }


/* Mobile inline edit bar — hidden on desktop */
.pe-inline-edit { display: none; }

.pe-sp-label {
  font-size: 0.75rem;
  font-weight: 500;
  min-width: 16px; /* just fits "S1"/"K1" — no big gap before the pin/spacer */
  color: #111827;
}
body.dark .pe-sp-label { color: #ffffff; }

.pe-sp-klabel { color: #be185d; }
body.dark .pe-sp-klabel { color: #f38ba8; }

.pe-sp-stepper {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto; /* compact — the input carries a fixed 4-digit width, no stretch */
}

.pe-sp-btn {
  width: 22px;
  height: 22px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: #f3f4f6;
  color: #374151;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  user-select: none;
}
body.dark .pe-sp-btn { background: #45475a; border-color: #585b70; color: #cdd6f4; }

.pe-sp-btn:hover { background: #e5e7eb; }
body.dark .pe-sp-btn:hover { background: #585b70; }

.pe-sp-btn:active { background: #d1d5db; }
body.dark .pe-sp-btn:active { background: #6c6f85; }

.pe-sp-input {
  flex: 0 0 auto;
  width: 2.8rem;     /* fixed — fits exactly ~4 digits ("2000"), no wider */
  min-width: 2.8rem;
  text-align: right;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 3px;
  color: #1a1a2e;
  font-size: 0.78rem;
  padding: 0.1rem 0.25rem;
}
body.dark .pe-sp-input { background: #313244; border-color: #45475a; color: #cdd6f4; }

.pe-sp-input:focus { outline: none; border-color: #7c3aed; }

.pe-sp-unit {
  font-size: 0.7rem;
  color: #6b7280;
  flex-shrink: 0;
  width: 20px;
  text-align: left;
}

/* ── Segment / angle lock toggle ──────────────────────────────────────────── */
.pe-sp-lock {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  line-height: 1;
  cursor: pointer;
  opacity: 0.5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pe-sp-lock img { display: block; }
body.dark .pe-sp-lock img { filter: invert(1); } /* currentColor SVG via <img>: recolor for dark theme */
.pe-sp-lock:hover { opacity: 1; background: #e5e7eb; }
body.dark .pe-sp-lock:hover { background: #45475a; }
.pe-sp-lock.is-locked { opacity: 1; }

/* Location pin button — freezes a segment's grid position (own icon, left of stepper) */
.pe-sp-pin {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  opacity: 0.4; /* unlocked = dimmed grey */
  display: flex;
  align-items: center;
  justify-content: center;
}
.pe-sp-pin img { display: block; }
/* Empty slot in angle rows matching the pin button, so K steppers (and their −)
   line up in the same column as the segment steppers. */
.pe-sp-pin-spacer { flex: 0 0 22px; }
body.dark .pe-sp-pin img { filter: invert(1); } /* currentColor SVG via <img>: recolor for dark theme */
.pe-sp-pin:hover { opacity: 1; background: #e5e7eb; } /* hover lifts the grey to full */
body.dark .pe-sp-pin:hover { background: #45475a; }
/* Locked = full-brightness crossed-out pin (no grey); told apart by icon + brightness */
.pe-sp-pin.is-pinned { opacity: 1; }

/* Locked row: dimmed, non-editable length/angle */
.pe-sp-locked .pe-sp-input:disabled,
.pe-sp-locked .pe-sp-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.pe-sp-locked .pe-sp-label { color: #7c3aed; font-weight: 700; }
body.dark .pe-sp-locked .pe-sp-label { color: #cba6f7; }

/* JSON output */
.pe-json-wrap {
  flex-shrink: 0;
  background: #f0f1f7;
  border-top: 1px solid #d1d5db;
  padding: 0.75rem;
  max-height: 220px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow: hidden;
  opacity: 1;
  transition: max-height 0.38s cubic-bezier(0.4, 0, 1, 1),
              opacity 0.3s ease,
              padding 0.38s ease,
              border-width 0.38s ease;
}

.pe-json-wrap--closing {
  max-height: 0 !important;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-top-width: 0;
}

.pe-json-wrap--hidden {
  display: none !important;
}

.pe-json-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pe-json-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: #374151;
}
body.dark .pe-json-title { color: #a6adc8; }

.pe-json-textarea {
  flex: 1;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 5px;
  color: #1a5c4a;
  font-family: 'Fira Code', 'Cascadia Code', monospace;
  font-size: 0.75rem;
  padding: 0.5rem;
  resize: none;
  min-height: 120px;
}
body.dark .pe-json-wrap { background: #1e1e2e; border-color: #313244; }
body.dark .pe-json-textarea { background: #11111b; border-color: #313244; color: #a6e3a1; }

@media (max-width: 600px) {
  .mode-select-cards { flex-direction: column; }
  .mode-card { width: 100%; max-width: 320px; }
  .pe-toolbar { gap: 0.3rem; }
  .pe-btn { padding: 0.3rem 0.5rem; font-size: 0.75rem; }
  .pe-stats { display: none; }

}

/* Touch devices: hide header only in step 2 (profile editor) */
html.touch-device body.step-editor header {
  display: none;
}
html.touch-device body.step-editor #profile-editor-wrap {
  height: 100vh;
}

@media (hover: none) and (pointer: coarse) {
  #pe-btn-generate { display: none !important; }
}

/* Landscape on mobile: hide catalog so the grid gets enough vertical space */
@media (max-width: 860px) and (orientation: landscape) {
  .pe-catalog-panel { display: none; }
}

/* ── Light mode header ───────────────────────────────────────────────────────*/

body:not(.dark) header             { background: #ffffff; border-bottom-color: #e5e7eb; }
body:not(.dark) header h1          { color: #7c3aed; }
body:not(.dark) .header-back       { color: #6b7280; }
body:not(.dark) .header-back:hover { color: #7c3aed; }

/* ── Dark mode ───────────────────────────────────────────────────────────────*/

body.dark {
  background: #1e1e2e;
  color: #cdd6f4;
}

/* Progress bar */
body.dark #wizard-progress-bar {
  background: #181825;
  border-color: #45475a;
}

body.dark .wizard-dot {
  background: #313244;
  border-color: #45475a;
  color: #585b70;
}

body.dark .wizard-step-item.active .wizard-dot {
  border-color: #7c3aed;
  color: #cba6f7;
  background: #2a1f3d;
}

body.dark .wizard-step-item.done .wizard-dot {
  background: #7c3aed;
  border-color: #7c3aed;
  color: #fff;
}

body.dark .wizard-step-label        { color: #585b70; }
body.dark .wizard-step-item.active .wizard-step-label { color: #cba6f7; font-weight: 600; }
body.dark .wizard-step-item.done   .wizard-step-label { color: #45475a; }

body.dark .wizard-connector      { background: #45475a; }
body.dark .wizard-connector.done { background: #7c3aed; }

/* Nav bar */
body.dark #wizard-nav-bar {
  background: #181825;
  border-color: #45475a;
}

body.dark .wizard-btn-back {
  border-color: #45475a;
  color: #a6adc8;
}
body.dark .wizard-btn-back:not(:disabled):hover {
  background: #313244;
  color: #cdd6f4;
}
body.dark .wizard-btn-next:disabled {
  background: #45475a;
  border-color: #45475a;
  color: #585b70;
}

/* Step 1: form */
body.dark .wizard-step-form,
body.dark .wizard-step-wide {
  background: #1e1e2e;
}

body.dark .order-form-title { color: #cdd6f4; }
body.dark .order-form-desc  { color: #a6adc8; }
body.dark .order-form-label { color: #bac2de; }

body.dark .order-form-input {
  background: #313244;
  border-color: #45475a;
  color: #cdd6f4;
}
body.dark .order-form-input::placeholder { color: #45475a; }
body.dark .order-form-input:focus       { border-color: #7c3aed; }

/* Step 2: catalog */
body.dark #catalog-panel {
  background: #181825;
  border-color: #45475a;
}
body.dark .catalog-panel-title { color: #585b70; }

body.dark .catalog-card {
  background: #313244;
  border-color: #45475a;
}
body.dark .catalog-card:hover {
  background: #45475a;
  border-color: #7c3aed;
}
body.dark .catalog-card--active {
  background: #2a1f3d;
  border-color: #7c3aed;
}
body.dark .catalog-thumb {
  background: #1e1e2e;
  border-color: #45475a;
  color: #cdd6f4;
}
body.dark .catalog-card-name                  { color: #a6adc8; }
body.dark .catalog-card--active .catalog-card-name { color: #cba6f7; }

/* Step 2: SVG panel */
body.dark #svg-panel {
  background: #1e1e2e;
  border-color: #45475a;
}

body.dark .step-layers-btn {
  background: #313244;
  border-color: #45475a;
}
body.dark .step-layers-btn:hover { background: #45475a; }

body.dark .svg-layers-popup {
  background: #313244;
  border-color: #45475a;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}
body.dark .layers-popup-header {
  background: #181825;
  border-color: #45475a;
  color: #cdd6f4;
}
body.dark .layer-row:hover { background: #45475a; }
body.dark .layer-label     { color: #bac2de; }

body.dark .zoom-indicator {
  background: rgba(49,50,68,0.92);
  border-color: #45475a;
  color: #a6adc8;
}

/* Step 2: editor panel */
body.dark #editor-panel { background: #181825; }
body.dark .editor-section-title { color: #585b70; }

body.dark .seg-table th {
  color: #585b70;
  border-color: #45475a;
}
body.dark .seg-table td {
  border-color: #313244;
  color: #bac2de;
}
body.dark .seg-k-label { color: #cdd6f4; }
body.dark .seg-angle   { color: #585b70; }

body.dark .seg-input {
  background: #313244;
  border-color: #45475a;
  color: #cdd6f4;
}
body.dark .seg-input:focus { border-color: #7c3aed; }

body.dark .stepper-btn {
  background: #45475a;
  border-color: #585b70;
  color: #cdd6f4;
}
body.dark .stepper-btn:hover  { background: #585b70; }
body.dark .stepper-btn:active { background: #313244; }
body.dark .stepper-unit       { color: #a6adc8; }

body.dark .editor-unfolded   { color: #a6adc8; }
body.dark .editor-field-label{ color: #585b70; }

body.dark .order-input {
  background: #313244;
  border-color: #45475a;
  color: #cdd6f4;
}
body.dark .order-input:focus  { border-color: #7c3aed; }
body.dark .order-input-unit   { color: #a6adc8; }

body.dark .mode-toggle-wrap { border-color: #45475a; }
body.dark .mode-btn {
  background: #313244;
  color: #a6adc8;
}
body.dark .mode-btn + .mode-btn { border-color: #45475a; }
body.dark .mode-btn.active {
  background: #7c3aed;
  color: #fff;
}

/* Step 2: mini-cart */
body.dark #mini-cart-panel {
  background: #181825;
  border-color: #45475a;
}
body.dark .mini-cart-label  { color: #585b70; }
body.dark .mini-cart-empty  { color: #45475a; }
body.dark .mini-cart-item {
  background: #313244;
  border-color: #45475a;
}
body.dark .mini-cart-item-name   { color: #cdd6f4; }
body.dark .mini-cart-item-detail { color: #a6adc8; }
body.dark .mini-cart-remove      { color: #45475a; }

/* Step 3: review */
body.dark .review-header {
  background: #313244;
  border-color: #45475a;
}
body.dark .review-header-title          { color: #cdd6f4; }
body.dark .review-header-meta           { color: #a6adc8; }
body.dark .review-header-meta span strong { color: #bac2de; }

body.dark .review-item {
  background: #313244;
  border-color: #45475a;
}
body.dark .review-item-svg {
  background: #1e1e2e;
  border-color: #45475a;
}
body.dark .review-item-name            { color: #cdd6f4; }
body.dark .review-item-table td        { color: #bac2de; }
body.dark .review-item-table td:first-child { color: #a6adc8; }

/* Mobile border overrides */
@media (max-width: 860px) {
  body.dark #catalog-panel { border-color: #45475a; }
  body.dark #svg-panel     { border-color: #45475a; }
  body.dark #editor-panel  { border-color: #45475a; }

  .pe-body { flex-direction: column; }

  /* Desktop catalog hidden on mobile — replaced by compact bar */
  .pe-catalog-panel { display: none; }

  /* Mobile create mode: override name input display */
  .pe-mob-mode--create .pe-name-input {
    display: flex;
    flex: 1;
    min-width: 0;
    max-width: none;
  }

  /* ── Two-half mode bar ────────────────────────────────────── */
  .pe-mob-cat-bar {
    display: flex;
    flex-shrink: 0;
    width: 100%;
    padding: 7px 10px;
    gap: 7px;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    box-sizing: border-box;
  }
  body.dark .pe-mob-cat-bar {
    background: #181825;
    border-bottom-color: #313244;
  }

  .pe-mob-mode-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0 0.75rem;
    height: 38px;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    background: #f9fafb;
    cursor: pointer;
    font: 500 0.82rem/1 inherit;
    color: #6b7280;
    touch-action: manipulation;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
    transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
    white-space: nowrap;
    overflow: hidden;
  }
  body.dark .pe-mob-mode-btn {
    color: #6c7086;
    background: #1e1e2e;
    border-color: #313244;
  }

  .pe-mob-mode-btn--active {
    background: #7c3aed;
    color: #ffffff;
    border-color: #7c3aed;
    box-shadow: 0 2px 8px color-mix(in srgb, #7c3aed 35%, transparent);
  }
  body.dark .pe-mob-mode-btn--active {
    background: #cba6f7;
    color: #1e1e2e;
    border-color: #cba6f7;
    box-shadow: 0 2px 8px color-mix(in srgb, #cba6f7 30%, transparent);
  }

  /* Select half: label left, chevron right */
  .pe-mob-mode-btn--select {
    justify-content: space-between;
    padding-left: 0.85rem;
    padding-right: 0.6rem;
  }

  .pe-mob-bar-divider { display: none; }

  .pe-mob-cat-chevron {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    color: currentColor;
    transition: transform 200ms ease;
  }
  .pe-mob-cat-chevron.is-open {
    transform: rotate(180deg);
  }

  /* ── Catalog backdrop ────────────────────────────────────── */
  .pe-mob-cat-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 400;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
  .pe-mob-cat-backdrop.pe-mob-cat-sheet--open {
    opacity: 1;
    pointer-events: auto;
  }

  /* ── Catalog bottom sheet ────────────────────────────────── */
  .pe-mob-cat-sheet {
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 401;
    max-height: 72vh;
    border-radius: 20px 20px 0 0;
    background: #ffffff;
    box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.18);
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    overflow: hidden;
  }
  body.dark .pe-mob-cat-sheet { background: #1e1e2e; }
  .pe-mob-cat-sheet.pe-mob-cat-sheet--open { transform: translateY(0); }

  .pe-mob-cat-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem 0.5rem;
    flex-shrink: 0;
    border-bottom: 1px solid #e5e7eb;
  }
  body.dark .pe-mob-cat-sheet-header { border-color: #313244; }

  .pe-mob-cat-sheet-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1a1a2e;
  }
  body.dark .pe-mob-cat-sheet-title { color: #cdd6f4; }

  .pe-mob-cat-close {
    background: none;
    border: none;
    font-size: 1rem;
    color: #6b7280;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    line-height: 1;
  }
  body.dark .pe-mob-cat-close { color: #a6adc8; }

  /* ── Category tabs (horizontal scroll) ──────────────────── */
  .pe-mob-cat-tabs {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    flex-shrink: 0;
    scrollbar-width: none;
  }
  .pe-mob-cat-tabs::-webkit-scrollbar { display: none; }

  .pe-mob-cat-tab {
    flex-shrink: 0;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    border: 1.5px solid #d1d5db;
    background: #f9fafb;
    font-size: 0.78rem;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    white-space: nowrap;
    touch-action: manipulation;
  }
  body.dark .pe-mob-cat-tab { background: #313244; border-color: #45475a; color: #a6adc8; }
  .pe-mob-cat-tab--active {
    background: #f3f0ff;
    border-color: #7c3aed;
    color: #7c3aed;
    font-weight: 600;
  }
  body.dark .pe-mob-cat-tab--active { background: #2a1f3d; border-color: #7c3aed; color: #cba6f7; }

  /* ── Variants 2-column grid ──────────────────────────────── */
  .pe-mob-cat-variants {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem 1rem;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
  }

  /* Subcategory section label inside the mobile catalogue list (spans both columns) */
  .pe-mob-cat-subhead {
    grid-column: 1 / -1;
    font-size: 0.72rem;
    font-weight: 600;
    color: #6b7280;
    padding: 0.5rem 0.1rem 0.15rem;
    border-bottom: 1px solid #e5e7eb;
  }
  .pe-mob-cat-subhead:first-child { padding-top: 0.15rem; }
  body.dark .pe-mob-cat-subhead { color: #a6adc8; border-bottom-color: #45475a; }

  .pe-mob-cat-variant {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.5rem;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    background: #f9fafb;
    cursor: pointer;
    touch-action: manipulation;
  }
  body.dark .pe-mob-cat-variant { background: #313244; border-color: #45475a; }
  .pe-mob-cat-variant--active {
    border-color: #7c3aed;
    background: #f3f0ff;
  }
  body.dark .pe-mob-cat-variant--active { background: #2a1f3d; border-color: #7c3aed; }

  .pe-mob-cat-thumb {
    width: 100%;
    aspect-ratio: 4/3;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #374151;
  }
  body.dark .pe-mob-cat-thumb { color: #cdd6f4; }
  .pe-mob-cat-thumb svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  .pe-mob-cat-vname {
    font-size: 0.75rem;
    font-weight: 600;
    color: #374151;
  }
  body.dark .pe-mob-cat-vname { color: #cdd6f4; }
  .pe-mob-cat-variant--active .pe-mob-cat-vname { color: #7c3aed; }
  body.dark .pe-mob-cat-variant--active .pe-mob-cat-vname { color: #cba6f7; }

  /* Group-switch slide animations */
  @keyframes pe-mob-slide-from-right {
    from { transform: translateX(100%); opacity: 0.7; }
    to   { transform: translateX(0);    opacity: 1;   }
  }
  @keyframes pe-mob-slide-from-left {
    from { transform: translateX(-100%); opacity: 0.7; }
    to   { transform: translateX(0);     opacity: 1;   }
  }
  .pe-mob-cat-variants.anim-from-right {
    animation: pe-mob-slide-from-right 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .pe-mob-cat-variants.anim-from-left {
    animation: pe-mob-slide-from-left 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Seg panel, order section and cart wrap hidden on mobile — modal handles order */
  .pe-seg-panel            { display: none; }
  .pe-order-section        { display: none; }
  .pe-cart-wrap            { display: none; }
  .pe-json-wrap            { display: none !important; }
  .pe-desktop-add-cart-btn { display: none; }

  /* Mobile cart FAB — bottom-right corner of the SVG grid */
  .pe-mobile-cart-btn {
    display: grid;
    place-items: center;
    position: absolute;
    right: 5px;
    bottom: 5px;
    z-index: 50;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
    cursor: pointer;
    touch-action: manipulation;
    overflow: visible;
    color: #101014;
  }
  body.dark .pe-mobile-cart-btn {
    background: rgba(27, 27, 34, 0.96);
    border-color: rgba(255, 255, 255, 0.12);
    color: #ffffff;
  }

  /* Inline edit bar: floats at the bottom of the SVG area, nudged left of centre so
     its right edge clears the (shrunk) cart button in the bottom-right corner. */
  .pe-inline-edit {
    display: block;
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-60%);
    z-index: 20;
    background: #ffffff;
    border: 1.5px solid #7c3aed;
    border-radius: 10px;
    padding: 6px 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    white-space: nowrap;
    min-width: 0;
  }
  body.dark .pe-inline-edit {
    background: #1e1e2e;
    border-color: #cba6f7;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  }

  /* Hide bar when empty (no label selected) */
  .pe-inline-edit:empty { display: none; }

  .pe-inline-row {
    display: flex;
    align-items: center;
    gap: 5px; /* tight gaps both sides (label→pin and unit→lock) so the bar stays narrow */
  }
  /* The added pin + lock buttons squeezed the flex:1/width:0 input to nothing on
     mobile — give the inline bar's input a fixed readable width (fits ~4 digits)
     and stop the stepper from stretching, so the bar sizes to content instead. */
  .pe-inline-row .pe-sp-stepper { flex: 0 0 auto; }
  .pe-inline-row .pe-sp-input {
    flex: 0 0 auto;
    width: 2.8rem;
    min-width: 2.8rem;
    text-align: right;
  }
}

/* Mode selection */
body.dark .mode-select-title { color: #bac2de; }
body.dark .mode-card {
  background: #313244;
  border-color: #45475a;
}
body.dark .mode-card:hover {
  border-color: #7c3aed;
  box-shadow: 0 4px 16px rgba(124,58,237,0.25);
}
body.dark .mode-card-title { color: #cdd6f4; }
body.dark .mode-card-desc  { color: #a6adc8; }

/* ── 3D peržiūra (MVP 2026-07-16) ─────────────────────────────────────────────
   pe-3d-mode klasė ant #pe-svg-area valdo visą režimą: host matomumą (cross-fade,
   neblokuojantis — pointer-events valdo prieinamumą), FAB ikonos keitimą ir 2D
   redagavimo valdiklių slėpimą. 2D SVG lieka po apačia nepaliestas — grįžus viskas
   randama lygiai taip, kaip palikta. */
.pe-three-host {
  position: absolute;
  inset: 0;
  z-index: 15; /* virš 2D SVG, po valdikliais (tools/fabs z:20) */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.28s ease, visibility 0.28s;
}
#pe-svg-area.pe-3d-mode .pe-three-host {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Vienas 2D/3D mygtukas virš taper FAB: 2D režime — 3D ikona, 3D režime — 2D ikona */
.pe-view-mode-fab {
  position: absolute;
  left: 0.6rem;
  bottom: 0.6rem; /* apatinis lizdas — sukeista su taper FAB (2026-07-16) */
  z-index: 20;
  width: 46px;
  height: 46px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 50%;
}
.pe-view-mode-fab img { display: none; width: 100%; height: 100%; }
.pe-view-mode-fab .pe-view-fab-3d { display: block; }
#pe-svg-area.pe-3d-mode .pe-view-mode-fab .pe-view-fab-3d { display: none; }
#pe-svg-area.pe-3d-mode .pe-view-mode-fab .pe-view-fab-2d { display: block; }

/* 3D režime slepiami TIK 2D taškų/segmentų redagavimo valdikliai. Lieka: režimo
   mygtukas, „Namo" (centravimo mygtukas — 3D jis grąžina kamerą) ir informacija. */
#pe-svg-area.pe-3d-mode #pe-flip-btn,
#pe-svg-area.pe-3d-mode #pe-rotate-btn,
#pe-svg-area.pe-3d-mode #pe-rotate-small-btn,
#pe-svg-area.pe-3d-mode #pe-rotate-small-left-btn,
#pe-svg-area.pe-3d-mode #pe-zoom-in-btn,
#pe-svg-area.pe-3d-mode #pe-zoom-out-btn,
#pe-svg-area.pe-3d-mode #pe-layers-container,
#pe-svg-area.pe-3d-mode #pe-taper-fab,
#pe-svg-area.pe-3d-mode #pe-sidebar-container,
#pe-svg-area.pe-3d-mode .pe-inline-edit {
  display: none !important;
}

/* Nepalaikomo WebGL pranešimas */
.pe-3d-unsupported {
  position: absolute;
  left: 50%;
  bottom: 1.2rem;
  transform: translateX(-50%);
  z-index: 30;
  background: #1e1e2e;
  color: #cdd6f4;
  padding: 0.55rem 1rem;
  border-radius: 10px;
  font-size: 0.85rem;
  box-shadow: 0 4px 18px rgba(0,0,0,0.35);
  pointer-events: none;
}