.dzv-generator-root {--bg: #f4f5f7;
      --panel: #ffffff;
      --panel-2: #f8f9fb;
      --text: #1b1d21;
      --muted: #696f7a;
      --line: #dfe3e8;
      --accent: #ff7a00;
      --accent-dark: #d95f00;
      --good: #168454;
      --warn: #b16800;
      --bad: #b3261e;
      --shadow: 0 12px 35px rgba(19, 25, 35, 0.10);
      --radius: 18px;}
.dzv-generator-root * {box-sizing: border-box;}
.dzv-generator-root, .dzv-generator-root {margin: 0;
      min-height: 100%;
      font-family: Inter, Arial, Helvetica, sans-serif;
      background: var(--bg);
      color: var(--text);}
.dzv-generator-root {padding: 12px;}
.dzv-generator-root .app {max-width: 1540px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: minmax(330px, 400px) minmax(0, 1fr);
      gap: 12px;
      min-height: calc(100vh - 24px);}
.dzv-generator-root .panel, .dzv-generator-root .viewer-shell {background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);}
.dzv-generator-root .panel {padding: 14px;
      overflow: auto;
      max-height: calc(100vh - 24px);}
.dzv-generator-root .brand {display: grid;
      grid-template-columns: 108px minmax(0, 1fr);
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;
      padding-bottom: 10px;
      border-bottom: 1px solid rgba(223,227,232,.9);}
.dzv-generator-root .brand-logo {width: 100%;
      max-width: 104px;
      height: auto;
      display: block;
      flex: 0 0 auto;}
.dzv-generator-root .brand-copy {min-width: 0;}
.dzv-generator-root h1 {margin: 0;
      font-size: 18px;
      line-height: 1.15;}
.dzv-generator-root .subtitle {margin: 2px 0 0;
      color: var(--muted);
      font-size: 12px;}
.dzv-generator-root .section {border-top: 1px solid var(--line);
      padding-top: 12px;
      margin-top: 12px;}
.dzv-generator-root .section:first-of-type {border-top: 0;
      margin-top: 0;
      padding-top: 0;}
.dzv-generator-root .section-collapsible {border-top: 1px solid var(--line);
      padding-top: 10px;
      margin-top: 10px;}
.dzv-generator-root .section-collapsible:first-of-type {border-top: 0;
      margin-top: 0;
      padding-top: 0;}
.dzv-generator-root .section-summary {list-style: none;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      user-select: none;
      padding: 10px 12px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #f8fafc;}
.dzv-generator-root .section-summary::-webkit-details-marker {display: none;}
.dzv-generator-root .section-body {padding-top: 10px;}
.dzv-generator-root .section-intro {margin: 0 0 10px;}
.dzv-generator-root .section-title {display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 2px;
      margin-bottom: 8px;
      flex: 1;
      min-width: 0;}
.dzv-generator-root .section-summary .section-title {margin-bottom: 0;}
.dzv-generator-root .section-toggle-indicator {width: 20px;
      height: 20px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      background: #fff4e9;
      color: #a35200;
      flex: 0 0 auto;
      transition: transform .18s ease;}
.dzv-generator-root .section-toggle-indicator::before {content: "▾";
      font-size: 12px;
      line-height: 1;
      font-weight: 800;}
.dzv-generator-root .section-collapsible[open] .section-toggle-indicator {transform: rotate(180deg);}
.dzv-generator-root .section-title h2 {margin: 0;
      font-size: 14px;
      letter-spacing: 0.02em;
      text-transform: uppercase;}
.dzv-generator-root .hint {color: var(--muted);
      font-size: 11px;}
.dzv-generator-root .field-grid {display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;}
.dzv-generator-root .field-grid.one {grid-template-columns: 1fr;}
.dzv-generator-root .field-grid.text-composer {grid-template-columns: minmax(0, 1fr); align-items: stretch;}
.dzv-generator-root .field-grid.three {grid-template-columns: repeat(3, minmax(0, 1fr));}
.dzv-generator-root .field-stack {display: flex;
      flex-direction: column;
      min-height: 0;}
.dzv-generator-root label {display: block;
      margin-bottom: 4px;
      font-size: 12px;
      color: #353941;
      font-weight: 700;}
.dzv-generator-root input, .dzv-generator-root select, .dzv-generator-root textarea, .dzv-generator-root button {font: inherit;}
.dzv-generator-root input[type="number"], .dzv-generator-root input[type="text"], .dzv-generator-root select, .dzv-generator-root textarea {width: 100%;
      border: 1px solid #cfd5dd;
      border-radius: 10px;
      padding: 8px 9px;
      background: #fff;
      color: var(--text);
      outline: none;
      transition: border-color .15s ease, box-shadow .15s ease;}
.dzv-generator-root textarea {resize: none;
      min-height: 124px;
      overflow-y: hidden;
      text-transform: uppercase;
      line-height: 1.35;}
.dzv-generator-root input:focus, .dzv-generator-root select:focus, .dzv-generator-root textarea:focus {border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.14);}
.dzv-generator-root input:disabled, .dzv-generator-root select:disabled {opacity: .55;
      background: #eceff3;}
.dzv-generator-root .range-wrap {display: grid;
      grid-template-columns: 1fr 58px;
      gap: 9px;
      align-items: center;}
.dzv-generator-root input[type="range"] {width: 100%;
      accent-color: var(--accent);}
.dzv-generator-root .range-value {text-align: center;
      padding: 6px 5px;
      border: 1px solid var(--line);
      background: var(--panel-2);
      border-radius: 8px;
      font-size: 12px;
      font-weight: 800;}
.dzv-generator-root .inline-check {display: flex;
      align-items: center;
      gap: 9px;
      padding: 8px 9px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--panel-2);
      min-height: 42px;}
.dzv-generator-root .inline-check input {width: 17px;
      height: 17px;
      accent-color: var(--accent);}
.dzv-generator-root .inline-check span {font-size: 12px;
      font-weight: 700;}
.dzv-generator-root .dimension-stepper {
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr) 34px;
      align-items: stretch;
      gap: 5px;}
.dzv-generator-root .dimension-stepper input[type="number"] {
      text-align: center;
      -moz-appearance: textfield;}
.dzv-generator-root .dimension-stepper input[type="number"]::-webkit-inner-spin-button,
.dzv-generator-root .dimension-stepper input[type="number"]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;}
.dzv-generator-root .dimension-step {
      border: 1px solid #cfd5dd;
      border-radius: 10px;
      background: var(--panel-2);
      color: var(--text);
      font-size: 18px;
      font-weight: 800;
      line-height: 1;
      cursor: pointer;
      box-shadow: none;}
.dzv-generator-root .dimension-step:hover,
.dzv-generator-root .dimension-step:focus-visible {
      border-color: var(--accent);
      background: #fff4e9;
      color: #a35200;
      outline: none;}
.dzv-generator-root .constraint-note:not([hidden]) {
      margin-top: 5px;
      color: var(--bad);
      font-size: 10px;
      line-height: 1.3;}
.dzv-generator-root .sr-only {position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      padding: 0 !important;
      margin: -1px !important;
      overflow: hidden !important;
      clip: rect(0, 0, 0, 0) !important;
      white-space: nowrap !important;
      border: 0 !important;}
.dzv-generator-root .shape-choice-grid {grid-column: 1 / -1;
      display: flex;
      flex-wrap: wrap;
      gap: 7px;}
.dzv-generator-root .shape-choice-grid.base-grid {max-width: 100%;}
.dzv-generator-root .rounding-row {grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
      align-items: end;}
.dzv-generator-root .shape-choice {min-width: 0;
      width: 82px;
      flex: 0 0 82px;
      padding: 8px 5px 7px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--panel-2);
      color: var(--text);
      display: grid;
      justify-items: center;
      gap: 5px;
      font-size: 9px;
      line-height: 1.1;
      font-weight: 800;
      box-shadow: none;}
.dzv-generator-root .shape-choice:hover:not(:disabled) {transform: none;
      border-color: #ffb36f;
      background: #fff8f0;}
.dzv-generator-root .shape-choice.active {border-color: var(--accent);
      background: #fff3e7;
      color: #9c4b00;
      box-shadow: inset 0 0 0 1px rgba(255,122,0,.14);}
.dzv-generator-root .shape-icon {width: 44px;
      height: 30px;
      display: grid;
      place-items: center;}
.dzv-generator-root .shape-icon svg {width: 100%;
      height: 100%;
      overflow: visible;}
.dzv-generator-root .shape-icon rect, .dzv-generator-root .shape-icon path, .dzv-generator-root .shape-icon line {fill: rgba(255,122,0,.08);
      stroke: currentColor;
      stroke-width: 2.2;
      vector-effect: non-scaling-stroke;
      stroke-linecap: round;
      stroke-linejoin: round;}
.dzv-generator-root .shape-choice.toggle {position: relative;}
.dzv-generator-root .rounding-row .shape-choice {width: auto;
      flex: none;
      min-width: 0;}
.dzv-generator-root .rounding-row #cornerRadiusField {grid-column: span 3;
      min-width: 0;}
.dzv-generator-root .shape-choice.toggle .shape-icon path {fill: none;}
.dzv-generator-root .font-size-editor {display: grid;
      align-content: start;
      gap: 8px;
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: 11px;
      background: var(--panel-2);
      min-height: 0;
      height: 100%;
      flex: 1 1 auto;
      box-sizing: border-box;}
.dzv-generator-root .font-stepper {display: grid;
      grid-template-columns: 42px minmax(0, 1fr) 42px;
      gap: 8px;
      align-items: center;
      width: 100%;}
.dzv-generator-root .font-stepper button {min-height: 42px;
      padding: 8px 6px;
      border-radius: 10px;
      border: 1px solid var(--line);
      background: #fff;
      color: var(--text);
      font-size: 15px;
      font-weight: 900;
      box-shadow: none;}
.dzv-generator-root .font-stepper button:hover:not(:disabled) {border-color: #ffb36f;
      background: #fff8f0;}
.dzv-generator-root .font-stepper button span {font-size: 11px;
      vertical-align: super;
      margin-left: 1px;}
.dzv-generator-root .font-stepper select {min-height: 42px;
      min-width: 94px;
      padding: 8px 34px 8px 12px;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 800;
      text-align: center;
      text-align-last: center;
      background: #fff;}
.dzv-generator-root .font-stepper.compact {grid-template-columns: 38px minmax(0, 1fr) 38px;}
.dzv-generator-root .font-stepper.compact button {min-height: 38px; font-size: 14px;}
.dzv-generator-root .font-stepper.compact select {min-height: 38px; min-width: 88px; padding-right: 32px; font-size: 12px;}
.dzv-generator-root .band-vertical-slider {writing-mode: vertical-lr;
      width: 24px;
      height: 112px;
      margin: 0;
      direction: ltr;}
.dzv-generator-root .band-workspace {display: grid;
      grid-template-columns: 52px minmax(170px, 1fr);
      gap: 9px;
      align-items: stretch;
      min-height: 188px;}
.dzv-generator-root .band-preview-column {display: grid;
      grid-template-rows: minmax(188px, 1fr) auto;
      gap: 6px;
      min-width: 0;}
.dzv-generator-root .band-bottom-gap {min-height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff8f0;
      color: #8d4200;
      font-size: 9px;
      font-weight: 900;
      font-variant-numeric: tabular-nums;
      letter-spacing: .01em;}
.dzv-generator-root .band-master-control, .dzv-generator-root .band-slider-column {border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--panel-2);
      padding: 7px 5px;
      display: grid;
      justify-items: center;
      align-content: center;
      gap: 5px;
      min-width: 46px;}
.dzv-generator-root .band-master-control strong, .dzv-generator-root .band-slider-column strong {font-size: 9px;
      line-height: 1.05;
      text-align: center;
      max-width: 48px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;}
.dzv-generator-root .band-master-control .band-y-value, .dzv-generator-root .band-slider-column .band-y-value {min-width: 0;
      text-align: center;
      font-size: 9px;}
.dzv-generator-root .band-mini-shape {position: relative;
      min-height: 188px;
      border: 3px solid var(--accent);
      border-radius: 9px;
      background:
        linear-gradient(rgba(255,255,255,.82), rgba(255,255,255,.82)),
        repeating-linear-gradient(0deg, transparent 0 17px, rgba(120,129,142,.13) 17px 18px),
        repeating-linear-gradient(90deg, transparent 0 17px, rgba(120,129,142,.13) 17px 18px);
      overflow: hidden;
      box-shadow: inset 0 0 0 5px rgba(255,122,0,.13);
      touch-action: none;
      user-select: none;}
.dzv-generator-root .band-safe-zone {position: absolute;
      left: 8px;
      right: 8px;
      top: 8px;
      bottom: 8px;
      border: 1px dashed rgba(177,104,0,.45);
      border-radius: 4px;
      pointer-events: none;}
.dzv-generator-root .band-mini-bar {position: absolute;
      left: 0;
      right: 0;
      min-height: 10px;
      display: grid;
      grid-template-columns: 18px minmax(0, 1fr) auto;
      align-items: center;
      gap: 4px;
      padding: 0 5px 0 3px;
      background: rgba(255,177,101,.92);
      border-top: 1px solid rgba(200,95,0,.42);
      border-bottom: 1px solid rgba(200,95,0,.42);
      color: #8d4200;
      font-size: 9px;
      font-weight: 900;
      line-height: 1;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      cursor: grab;
      transition: top .08s linear, height .08s linear, box-shadow .12s ease, filter .12s ease;
      outline: none;}
.dzv-generator-root .band-mini-bar:hover, .dzv-generator-root .band-mini-bar:focus-visible, .dzv-generator-root .band-mini-bar.selected {filter: saturate(1.08);
      box-shadow: inset 0 0 0 2px rgba(200,95,0,.58), 0 3px 10px rgba(141,66,0,.18);
      z-index: 3;}
.dzv-generator-root .band-mini-bar.dragging {cursor: grabbing;
      transition: none;
      box-shadow: inset 0 0 0 2px #c85f00, 0 5px 16px rgba(141,66,0,.28);
      z-index: 5;}
.dzv-generator-root .band-mini-grip {font-size: 11px;
      letter-spacing: -2px;
      opacity: .66;
      transform: rotate(90deg);
      pointer-events: none;}
.dzv-generator-root .band-mini-label {min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      pointer-events: none;}
.dzv-generator-root .band-mini-position {padding: 2px 4px;
      border-radius: 5px;
      background: rgba(255,255,255,.68);
      font-size: 8px;
      font-variant-numeric: tabular-nums;
      pointer-events: none;
      text-transform: uppercase;}
.dzv-generator-root .band-slider-columns {display: none;}
.dzv-generator-root .band-slider-columns.compact {grid-auto-columns: 42px;
      gap: 5px;}
.dzv-generator-root .band-slider-columns.ultra-compact {grid-auto-columns: 38px;
      gap: 4px;}
.dzv-generator-root .band-slider-column.compact {min-width: 40px;
      padding-left: 4px;
      padding-right: 4px;}
.dzv-generator-root .band-slider-column.compact strong, .dzv-generator-root .band-slider-column.compact .band-y-value {font-size: 8px;}
.dzv-generator-root .band-controls-caption {grid-column: 1 / -1;
      color: var(--muted);
      font-size: 10px;
      line-height: 1.3;
      text-align: center;}
.dzv-generator-root .uniform-font-panel {margin-bottom: 9px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(200px, 260px);
      gap: 10px;
      align-items: center;
      padding: 9px 10px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #fff7ef;}
.dzv-generator-root .uniform-font-panel strong {display: block;
      font-size: 11px;
      line-height: 1.2;}
.dzv-generator-root .uniform-font-panel .hint {display: block;
      margin-top: 2px;
      font-size: 9px;
      line-height: 1.25;}
.dzv-generator-root .band-font-editor {margin-top: 9px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(200px, 260px);
      gap: 10px;
      align-items: center;
      padding: 9px 10px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--panel-2);}
.dzv-generator-root .band-font-editor strong {display: block;
      font-size: 11px;
      line-height: 1.2;}
.dzv-generator-root .band-font-editor span {display: block;
      margin-top: 2px;
      color: var(--muted);
      font-size: 9px;
      line-height: 1.25;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;}
.dzv-generator-root .band-font-controls {display: grid;
      gap: 8px;}
.dzv-generator-root .inline-check.compact {min-height: 38px;
      padding: 6px 8px;}
.dzv-generator-root .inline-check.compact span {margin-top: 0;
      color: var(--text);
      font-size: 11px;
      font-weight: 800;
      white-space: normal;
      overflow: visible;
      text-overflow: clip;}
.dzv-generator-root .font-box {display: grid;
      gap: 9px;
      padding: 12px;
      border-radius: 12px;
      background: #fff7ef;
      border: 1px solid #ffd2aa;}
.dzv-generator-root .font-status {font-size: 12px;
      color: var(--muted);}
.dzv-generator-root .file-label {display: inline-flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
      width: 100%;
      border: 1px dashed #ec8a33;
      color: #9c4b00;
      background: #fff;
      border-radius: 10px;
      padding: 10px;
      cursor: pointer;
      font-size: 12px;
      font-weight: 800;}
.dzv-generator-root .file-label:hover {background: #fffaf6;}
.dzv-generator-root .file-label input {display: none;}
.dzv-generator-root .technical-grid {display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;}
.dzv-generator-root .tech-card {background: var(--panel-2);
      border: 1px solid var(--line);
      border-radius: 11px;
      padding: 9px;}
.dzv-generator-root .tech-card strong {display: block;
      font-size: 12px;
      margin-bottom: 3px;}
.dzv-generator-root .tech-card span {display: block;
      color: var(--muted);
      font-size: 10px;
      line-height: 1.25;}
.dzv-generator-root .actions {display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-top: 16px;}
.dzv-generator-root button {border: 0;
      border-radius: 11px;
      padding: 12px 14px;
      cursor: pointer;
      font-weight: 900;
      transition: transform .12s ease, filter .12s ease, opacity .12s ease;}
.dzv-generator-root button:hover:not(:disabled) {transform: translateY(-1px);
      filter: brightness(.98);}
.dzv-generator-root button:disabled {cursor: not-allowed;
      opacity: .45;}
.dzv-generator-root .primary {background: var(--accent);
      color: #fff;
      box-shadow: 0 8px 20px rgba(255, 122, 0, .22);}
.dzv-generator-root .secondary {background: #20242a;
      color: #fff;}
.dzv-generator-root .status {margin-top: 14px;
      border-radius: 12px;
      padding: 11px 12px;
      font-size: 12px;
      line-height: 1.45;
      border: 1px solid var(--line);
      background: var(--panel-2);}
.dzv-generator-root .status.good {border-color: #9fd9bd; background: #effaf5; color: #0d6842;}
.dzv-generator-root .status.warn {border-color: #f4ca88; background: #fff8ea; color: #875100;}
.dzv-generator-root .status.bad {border-color: #efaaa6; background: #fff2f1; color: #8c1c16;}
.dzv-generator-root .metrics {margin-top: 12px;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;}
.dzv-generator-root .metric {border: 1px solid var(--line);
      background: #fff;
      border-radius: 10px;
      padding: 9px;}
.dzv-generator-root .metric small {display: block;
      color: var(--muted);
      margin-bottom: 3px;
      font-size: 10px;}
.dzv-generator-root .metric strong {font-size: 12px;}
.dzv-generator-root .viewer-shell {position: relative;
      overflow: hidden;
      min-height: 650px;}
.dzv-generator-root #viewer {width: 100%;
      height: 100%;
      min-height: 650px;
      display: block;
      background:
        radial-gradient(circle at 45% 30%, rgba(255,255,255,.95), rgba(240,242,246,.95) 58%, rgba(224,228,235,.95));}
.dzv-generator-root .viewer-toolbar {position: absolute;
      top: 14px;
      left: 14px;
      right: 14px;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
      pointer-events: none;
      z-index: 3;}
.dzv-generator-root .toolbar-card {pointer-events: auto;
      background: rgba(255,255,255,.90);
      border: 1px solid rgba(205,210,219,.9);
      box-shadow: 0 8px 24px rgba(20,24,31,.10);
      backdrop-filter: blur(12px);
      border-radius: 12px;
      padding: 8px;
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      align-items: center;}
.dzv-generator-root .toolbar-card button {padding: 8px 10px;
      border-radius: 8px;
      color: #2d3138;
      background: #f0f2f5;
      font-size: 11px;}
.dzv-generator-root .toolbar-card button.active {color: #fff;
      background: var(--accent);}
.dzv-generator-root .viewer-info {pointer-events: none;
      background: rgba(31,35,41,.88);
      color: white;
      border-radius: 12px;
      padding: 9px 11px;
      font-size: 11px;
      line-height: 1.4;
      max-width: 260px;}
.dzv-generator-root .viewer-footer {position: absolute;
      left: 14px;
      right: 14px;
      bottom: 14px;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 12px;
      pointer-events: none;
      z-index: 3;}
.dzv-generator-root .viewer-scale {margin-left: auto;
      background: rgba(31,35,41,.88);
      color: #fff;
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 10px;
      padding: 8px 10px;
      font-size: 10px;
      line-height: 1.45;
      text-align: right;
      backdrop-filter: blur(12px);
      box-shadow: 0 8px 24px rgba(20,24,31,.10);}
.dzv-generator-root .viewer-meta {margin-left: auto;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 8px;
      max-width: 360px;
      width: min(100%, 360px);}
.dzv-generator-root .viewer-status.status {margin-top: 0;
      padding: 9px 11px;
      font-size: 11px;
      line-height: 1.4;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.14);
      box-shadow: 0 8px 24px rgba(20,24,31,.10);
      backdrop-filter: blur(12px);
      background: rgba(255,255,255,.92);
      pointer-events: none;}
.dzv-generator-root .viewer-status.status.good {border-color: #9fd9bd; background: rgba(239,250,245,.96); color: #0d6842;}
.dzv-generator-root .viewer-status.status.warn {border-color: #f4ca88; background: rgba(255,248,234,.96); color: #875100;}
.dzv-generator-root .viewer-status.status.bad {border-color: #efaaa6; background: rgba(255,242,241,.96); color: #8c1c16;}
.dzv-generator-root .legend {background: rgba(255,255,255,.90);
      border: 1px solid rgba(205,210,219,.9);
      border-radius: 12px;
      padding: 9px 11px;
      font-size: 11px;
      color: #4c515a;
      line-height: 1.5;
      backdrop-filter: blur(12px);}
.dzv-generator-root .legend-row {display: flex; align-items: center; gap: 7px;}
.dzv-generator-root .dot {width: 9px; height: 9px; border-radius: 50%; display: inline-block;}
.dzv-generator-root .dot.orange {background: #ff7a00;}
.dzv-generator-root .dot.band {background: #ffb165;}
.dzv-generator-root .dot.dark {background: #c85f00;}
.dzv-generator-root .loading {position: absolute;
      inset: 0;
      display: none;
      place-items: center;
      background: rgba(244,245,247,.72);
      z-index: 10;
      backdrop-filter: blur(3px);}
.dzv-generator-root .loading.show {display: grid;}
.dzv-generator-root .spinner {width: 44px;
      height: 44px;
      border: 4px solid rgba(255,122,0,.22);
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: spin .85s linear infinite;}
@keyframes spin {to {transform: rotate(360deg);}}
@media (max-width: 980px) {.dzv-generator-root {padding: 10px;}
.dzv-generator-root .app {grid-template-columns: 1fr;
        min-height: auto;}
.dzv-generator-root .panel {max-height: none;}
.dzv-generator-root .viewer-shell, .dzv-generator-root #viewer {min-height: 560px;}}
@media (max-width: 540px) {.dzv-generator-root .field-grid, .dzv-generator-root .field-grid.three, .dzv-generator-root .technical-grid, .dzv-generator-root .actions, .dzv-generator-root .metrics {grid-template-columns: 1fr;}
.dzv-generator-root .viewer-shell, .dzv-generator-root #viewer {min-height: 470px;}
.dzv-generator-root .viewer-toolbar {flex-direction: column;}
.dzv-generator-root .viewer-info {max-width: 100%;}
.dzv-generator-root .viewer-footer {display: none;}
.dzv-generator-root .field-grid.text-composer {grid-template-columns: 1fr;}
.dzv-generator-root .brand {grid-template-columns: 84px minmax(0, 1fr); gap: 10px;}
.dzv-generator-root .shape-choice {width: calc(25% - 6px); min-width: 72px; flex-basis: calc(25% - 6px);}
.dzv-generator-root .rounding-row {grid-template-columns: 1fr;}
.dzv-generator-root .rounding-row #cornerRadiusField {grid-column: auto;}
.dzv-generator-root .band-font-editor {grid-template-columns: 1fr;}
.dzv-generator-root .band-workspace {grid-template-columns: 46px minmax(120px, 1fr);}}
.dzv-generator-root .field-note {margin-top: 5px;
      min-height: 15px;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.3;}
.dzv-generator-root .field-note.limit {color: #a55a00; font-weight: 700;}
.dzv-generator-root .band-panel {display: grid;
      gap: 10px;}
.dzv-generator-root .band-group-card, .dzv-generator-root .band-row-card {border: 1px solid var(--border);
      border-radius: 12px;
      background: #f8f9fb;
      padding: 11px 12px;}
.dzv-generator-root .band-row-head, .dzv-generator-root .band-group-head {display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 8px;}
.dzv-generator-root .band-row-head strong, .dzv-generator-root .band-group-head strong {font-size: 12px;
      line-height: 1.25;
      overflow-wrap: anywhere;}
.dzv-generator-root .band-y-value {flex: 0 0 auto;
      min-width: 58px;
      text-align: right;
      font-size: 11px;
      font-weight: 800;
      color: var(--orange-dark);}
.dzv-generator-root .band-help {margin-top: 8px;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.4;}
.dzv-generator-root .small-button {width: 100%;
      min-height: 40px;
      border: 1px solid #ffb36f;
      border-radius: 11px;
      background: #fff6ed;
      color: #9b4c00;
      font-weight: 800;
      cursor: pointer;
      white-space: nowrap;
      padding-inline: 10px;
      font-size: 13px;}
.dzv-generator-root .small-button:hover {background: #ffead7;}
.dzv-generator-root .small-button:disabled {opacity: .45; cursor: not-allowed;}
.dzv-generator-root .band-disabled {padding: 12px;
      border: 1px dashed var(--border);
      border-radius: 12px;
      color: var(--muted);
      background: #fafbfc;
      font-size: 12px;
      line-height: 1.45;}
.dzv-generator-root { width:100%; display:block; font-family:Inter,Arial,Helvetica,sans-serif; color:#1b1d21; background:#f4f5f7; padding:12px; border-radius:18px; }
.dzv-generator-root .app { min-height:720px; }
.dzv-generator-root [hidden] { display:none !important; }

/* 0.1.1 – Divi/WordPress theme isolation and full-width shop layout */
.dzv-generator-root {
  width: min(1540px, calc(100vw - 32px)) !important;
  max-width: none !important;
  margin: 0 0 0 50% !important;
  transform: translateX(-50%);
  padding: 12px !important;
  border-radius: 18px;
  display: block !important;
  position: relative;
  line-height: 1.4 !important;
  font-size: 14px !important;
  overflow: visible;
}

.dzv-generator-root .app {
  width: 100% !important;
  max-width: 1540px !important;
  height: clamp(650px, calc(100vh - 260px), 820px) !important;
  min-height: 650px !important;
  grid-template-columns: minmax(340px, 400px) minmax(0, 1fr) !important;
}

.dzv-generator-root .panel {
  height: 100% !important;
  max-height: none !important;
  min-width: 0 !important;
}

.dzv-generator-root .viewer-shell,
.dzv-generator-root #viewer {
  height: 100% !important;
  min-height: 0 !important;
}

.dzv-generator-root .brand {
  grid-template-columns: 82px minmax(0, 1fr) !important;
}

.dzv-generator-root .brand-logo {
  width: 82px !important;
  max-width: 82px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

.dzv-generator-root .brand-copy h1 {
  margin: 0 !important;
  padding: 0 !important;
  font-family: Inter, Arial, Helvetica, sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  color: #1b1d21 !important;
}

.dzv-generator-root .subtitle {
  margin: 2px 0 0 !important;
  padding: 0 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

.dzv-generator-root .section-title h2 {
  margin: 0 !important;
  padding: 0 !important;
  font-family: Inter, Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  color: #1b1d21 !important;
}

.dzv-generator-root p,
.dzv-generator-root ul,
.dzv-generator-root ol {
  margin-top: 0;
}

.dzv-generator-root button,
.dzv-generator-root input,
.dzv-generator-root select,
.dzv-generator-root textarea {
  line-height: normal !important;
}

.dzv-generator-root .band-group-card,
.dzv-generator-root .band-row-card,
.dzv-generator-root .band-disabled {
  border-color: var(--line) !important;
}

@media (max-width: 980px) {
  .dzv-generator-root {
    width: calc(100vw - 20px) !important;
    padding: 10px !important;
  }

  .dzv-generator-root .app {
    height: auto !important;
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
  }

  .dzv-generator-root .panel {
    height: auto !important;
  }

  .dzv-generator-root .viewer-shell,
  .dzv-generator-root #viewer {
    height: auto !important;
    min-height: 560px !important;
  }
}


/* 0.1.2 – reliable embedded scrolling and theme-safe hidden controls */
.dzv-generator-root .panel {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.dzv-generator-root .viewer-shell {
  overscroll-behavior: contain;
}

.dzv-generator-root [hidden],

.dzv-generator-root .brand-copy .subtitle {
  white-space: nowrap !important;
}


/* 0.1.4 – 3Dverzum webshop style, stable controls and shopper actions */
.dzv-generator-root {
  --accent: #e30613;
  --accent-dark: #b9000b;
  --panel-2: #fafafa;
  --line: #e5e5e5;
  --shadow: 0 14px 34px rgba(17, 17, 17, .09);
  background: #f7f7f7 !important;
}

.dzv-generator-root .panel,
.dzv-generator-root .viewer-shell {
  border-color: #e8e8e8 !important;
  box-shadow: 0 14px 34px rgba(17, 17, 17, .09) !important;
}

.dzv-generator-root .section-summary {
  background: #fff !important;
  border-color: #e4e4e4 !important;
  box-shadow: 0 4px 14px rgba(17, 17, 17, .035);
}

.dzv-generator-root .section-toggle-indicator {
  background: #fdebed !important;
  color: #e30613 !important;
}

.dzv-generator-root .shape-choice.active,
.dzv-generator-root .stamp-height-option.active {
  border-color: #e30613 !important;
  background: #fff1f2 !important;
  color: #b9000b !important;
  box-shadow: inset 0 0 0 1px rgba(227, 6, 19, .12) !important;
}

.dzv-generator-root input:focus,
.dzv-generator-root select:focus,
.dzv-generator-root textarea:focus {
  border-color: #e30613 !important;
  box-shadow: 0 0 0 3px rgba(227, 6, 19, .12) !important;
}

.dzv-generator-root .uniform-font-panel,
.dzv-generator-root .stamp-height-panel,
.dzv-generator-root .band-font-editor {
  display: grid !important;
  grid-template-columns: minmax(118px, .9fr) minmax(190px, 1.55fr) !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 4px 14px rgba(17,17,17,.035);
}

.dzv-generator-root .uniform-font-panel .inline-check {
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  margin: 0 !important;
}

.dzv-generator-root .uniform-font-panel .inline-check span {
  font-size: 10px !important;
  line-height: 1.25 !important;
  white-space: normal !important;
}

.dzv-generator-root .font-stepper.compact {
  grid-template-columns: 38px minmax(92px, 1fr) 38px !important;
  gap: 7px !important;
  min-width: 0 !important;
}

.dzv-generator-root .font-stepper select {
  min-width: 0 !important;
  padding-right: 30px !important;
}

.dzv-generator-root .stamp-height-panel {
  margin-bottom: 9px;
}

.dzv-generator-root .stamp-height-copy strong,
.dzv-generator-root .stamp-height-copy span {
  display: block;
}

.dzv-generator-root .stamp-height-copy strong { font-size: 11px; }
.dzv-generator-root .stamp-height-copy span { margin-top: 2px; color: var(--muted); font-size: 9px; line-height: 1.3; }

.dzv-generator-root .stamp-height-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.dzv-generator-root .stamp-height-option {
  min-width: 0;
  padding: 9px 4px !important;
  border: 1px solid #d9d9d9 !important;
  border-radius: 9px !important;
  background: #fafafa !important;
  color: #171717 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  box-shadow: none !important;
}

/* Divi-safe horizontal sliders */
.dzv-generator-root input[type="range"]:not(.band-vertical-slider) {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
  height: 18px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: linear-gradient(#d8d8d8, #d8d8d8) center / 100% 6px no-repeat !important;
  box-shadow: none !important;
}

.dzv-generator-root input[type="range"]:not(.band-vertical-slider)::-webkit-slider-runnable-track {
  height: 6px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #d8d8d8 !important;
}

.dzv-generator-root input[type="range"]:not(.band-vertical-slider)::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  margin-top: -6px !important;
  border: 3px solid #fff !important;
  border-radius: 50% !important;
  background: #e30613 !important;
  box-shadow: 0 2px 8px rgba(227,6,19,.3) !important;
}

.dzv-generator-root input[type="range"]:not(.band-vertical-slider)::-moz-range-track {
  height: 6px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #d8d8d8 !important;
}

.dzv-generator-root input[type="range"]:not(.band-vertical-slider)::-moz-range-thumb {
  width: 14px !important;
  height: 14px !important;
  border: 3px solid #fff !important;
  border-radius: 50% !important;
  background: #e30613 !important;
  box-shadow: 0 2px 8px rgba(227,6,19,.3) !important;
}

/* Divi-safe vertical group slider */
.dzv-generator-root .band-vertical-slider {
  -webkit-appearance: slider-vertical !important;
  appearance: auto !important;
  writing-mode: vertical-lr !important;
  direction: rtl !important;
  width: 20px !important;
  height: 112px !important;
  min-height: 112px !important;
  padding: 0 !important;
  margin: 0 auto !important;
  border: 0 !important;
  background: linear-gradient(#d8d8d8, #d8d8d8) center / 6px 100% no-repeat !important;
  accent-color: #e30613 !important;
  box-shadow: none !important;
}

.dzv-generator-root .band-mini-shape {
  border-color: #e30613 !important;
  box-shadow: inset 0 0 0 5px rgba(227,6,19,.08) !important;
}

.dzv-generator-root .band-safe-zone { border-color: rgba(227,6,19,.35) !important; }
.dzv-generator-root .band-mini-bar { background: #ffd2d5 !important; border-color: #e59da2 !important; color: #571015 !important; }
.dzv-generator-root .band-mini-bar.selected {
  filter: none !important;
  box-shadow: inset 0 0 0 2px #111, 0 4px 12px rgba(0,0,0,.18) !important;
  z-index: 4 !important;
}
.dzv-generator-root .band-mini-bar.dragging {
  box-shadow: inset 0 0 0 2px #111, 0 6px 18px rgba(0,0,0,.24) !important;
}

.dzv-generator-root .small-button {
  border-color: #e30613 !important;
  background: #fff !important;
  color: #c5000c !important;
}
.dzv-generator-root .small-button:hover { background: #fff1f2 !important; }

.dzv-generator-root .actions {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.dzv-generator-root .cart-primary {
  grid-column: 1 / -1 !important;
  min-height: 52px !important;
  border-radius: 999px !important;
  background: #e30613 !important;
  color: #fff !important;
  font-size: 15px !important;
  box-shadow: 0 12px 24px rgba(227,6,19,.24) !important;
}

.dzv-generator-root .cart-primary:hover:not(:disabled) {
  background: #c9000c !important;
  transform: translateY(-2px) !important;
}

.dzv-generator-root .secondary {
  border-radius: 999px !important;
  background: #191919 !important;
}

.dzv-generator-root .metrics { display: none !important; }

@media (max-width: 540px) {
  .dzv-generator-root .uniform-font-panel,
  .dzv-generator-root .stamp-height-panel,
  .dzv-generator-root .band-font-editor {
    grid-template-columns: 1fr !important;
  }
  .dzv-generator-root .stamp-height-options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 0.1.6 – vásárlói összesítő, kosármegerősítés és megjelenítési kapcsolók */
.dzv-generator-root .customer-summary {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid #e4e4e4;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(17,17,17,.045);
}

.dzv-generator-root .customer-summary-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}

.dzv-generator-root .customer-summary-head h3 {
  margin: 0 !important;
  padding: 0 !important;
  color: #111 !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
}

.dzv-generator-root .customer-summary-head span {
  color: #6d7178;
  font-size: 10px;
  line-height: 1.3;
  text-align: right;
}

.dzv-generator-root .customer-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.dzv-generator-root .customer-summary-grid > div {
  min-width: 0;
  padding: 10px;
  border: 1px solid #ededed;
  border-radius: 11px;
  background: #fafafa;
}

.dzv-generator-root .customer-summary-grid small,
.dzv-generator-root .customer-summary-grid strong {
  display: block;
}

.dzv-generator-root .customer-summary-grid small {
  margin-bottom: 3px;
  color: #6d7178;
  font-size: 9px;
  line-height: 1.25;
}

.dzv-generator-root .customer-summary-grid strong {
  color: #111;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 900;
}

.dzv-generator-root .cart-confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: grid;
  place-items: center;
  padding: 20px;
}

.dzv-generator-root .cart-confirm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10,10,10,.58);
  backdrop-filter: blur(4px);
}

.dzv-generator-root .cart-confirm-card {
  position: relative;
  width: min(100%, 460px);
  padding: 22px;
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(0,0,0,.28);
}

.dzv-generator-root .cart-confirm-card h3 {
  margin: 0 0 10px !important;
  padding: 0 !important;
  color: #111 !important;
  font-size: 21px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
}

.dzv-generator-root .cart-confirm-card p {
  margin: 0 !important;
  color: #4f545c;
  font-size: 13px;
  line-height: 1.55;
}

.dzv-generator-root .cart-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 10px;
  margin-top: 18px;
}

.dzv-generator-root .cart-confirm-actions button {
  min-height: 46px;
  border-radius: 999px !important;
}

.dzv-generator-root .cart-confirm-actions .primary {
  background: #e30613 !important;
  color: #fff !important;
}

html.dzv-modal-open,
html.dzv-modal-open body {
  overflow: hidden !important;
}

@media (max-width: 540px) {
  .dzv-generator-root .customer-summary-grid,
  .dzv-generator-root .cart-confirm-actions {
    grid-template-columns: 1fr;
  }
  .dzv-generator-root .customer-summary-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }
  .dzv-generator-root .customer-summary-head span { text-align: left; }
}

/* 0.1.8 – stabil termékállapot és natív tárgynéző-zoom (előzmény) */

/* 0.2.0 – konfiguráció-alapú kosárfolyamat, szerveroldali STL-tárolás nélkül */


/* 0.2.0 – háromlépéses útmutató */
.dzv-generator-root .dzv-howto {
  max-width: 1540px;
  margin: 0 auto 12px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
}
.dzv-generator-root .dzv-howto-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.dzv-generator-root .dzv-howto-kicker {
  order: 2;
  color: #e30613;
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.dzv-generator-root .dzv-howto h2 {
  margin: 0 !important;
  color: #111 !important;
  font-size: 20px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
}
.dzv-generator-root .dzv-howto-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.dzv-generator-root .dzv-howto-card {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 110px;
  padding: 15px 16px;
  overflow: hidden;
  border: 1px solid #e1e4e8;
  border-radius: 15px;
  background: #f8f9fb;
}
.dzv-generator-root .dzv-howto-number {
  position: absolute;
  top: 7px;
  right: 11px;
  color: rgba(227,6,19,.12);
  font-size: 44px;
  line-height: 1;
  font-weight: 950;
}
.dzv-generator-root .dzv-howto-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: #fff;
  color: #e30613;
  box-shadow: inset 0 0 0 1px rgba(227,6,19,.16);
}
.dzv-generator-root .dzv-howto-icon svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dzv-generator-root .dzv-howto-card h3 {
  position: relative;
  margin: 0 0 4px !important;
  color: #111 !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
}
.dzv-generator-root .dzv-howto-card p {
  position: relative;
  margin: 0 !important;
  color: #656b75;
  font-size: 11px;
  line-height: 1.45;
}
@media (max-width: 850px) {
  .dzv-generator-root .dzv-howto-grid { grid-template-columns: 1fr; }
  .dzv-generator-root .dzv-howto-card { min-height: 88px; }
}
@media (max-width: 540px) {
  .dzv-generator-root .dzv-howto { padding: 14px; }
  .dzv-generator-root .dzv-howto-head { align-items: flex-start; flex-direction: column; gap: 5px; }
  .dzv-generator-root .dzv-howto-kicker { order: 0; }
  .dzv-generator-root .dzv-howto h2 { font-size: 17px !important; }
}

.dzv-generator-root .dzv-howto-limit {
  position: relative;
  display: block;
  margin-top: 5px;
  color: #7a808a;
  font-size: 10px;
  line-height: 1.35;
  font-weight: 700;
}

/* 0.2.2 / generator 1.7.9 – UX, súgók, előzmények és mobilos tájékoztató */
.dzv-generator-root .brand {
  grid-template-columns: 86px minmax(0, 1fr) !important;
  gap: 12px !important;
  min-height: 72px;
  padding: 6px 2px 12px !important;
}
.dzv-generator-root .brand-logo {
  max-width: 82px !important;
}
.dzv-generator-root .brand-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}
.dzv-generator-root .brand-copy h1 {
  font-size: 18px !important;
  line-height: 1.12 !important;
}
.dzv-generator-root .brand-copy .subtitle {
  align-self: flex-start;
  margin: 0 !important;
  padding: 3px 7px;
  border: 1px solid #e4e4e4;
  border-radius: 999px;
  background: #f7f7f7;
  color: #6b7078;
  font-size: 10px !important;
  line-height: 1;
  font-weight: 800;
}

.dzv-generator-root .section-title-row {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between;
  gap: 8px !important;
}
.dzv-generator-root .help-trigger {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  padding: 0 !important;
  border: 1px solid #d8dce2 !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #565c66 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  box-shadow: none !important;
  transform: none !important;
}
.dzv-generator-root .help-trigger:hover,
.dzv-generator-root .help-trigger:focus-visible,
.dzv-generator-root .help-trigger[aria-expanded="true"] {
  border-color: #e30613 !important;
  background: #fff1f2 !important;
  color: #b9000b !important;
  outline: none;
}
.dzv-generator-root .inline-help-label,
.dzv-generator-root .band-master-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.dzv-generator-root .band-master-head {
  flex-direction: column;
}
.dzv-generator-root .band-master-head .help-trigger {
  width: 19px;
  height: 19px;
  min-width: 19px;
  min-height: 19px;
  font-size: 10px !important;
}
.dzv-generator-root .stamp-height-copy {
  display: flex;
  align-items: center;
}

.dzv-generator-root .dzv-help-popover {
  position: fixed;
  z-index: 1000001;
  width: min(300px, calc(100vw - 24px));
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 11px;
  background: rgba(29,33,39,.96);
  color: #fff;
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
  font-size: 11px;
  line-height: 1.45;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity .12s ease, transform .12s ease;
}
.dzv-generator-root .dzv-help-popover.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.dzv-generator-root .viewer-toolbar {
  right: auto !important;
  max-width: calc(100% - 390px);
  justify-content: flex-start !important;
}
.dzv-generator-root .toolbar-cluster {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  pointer-events: auto;
}
.dzv-generator-root .history-toolbar-card {
  padding: 6px !important;
}
.dzv-generator-root .history-toolbar-card button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  padding: 7px 9px !important;
}
.dzv-generator-root .history-toolbar-card button > span:first-child {
  font-size: 17px;
  line-height: 1;
}
.dzv-generator-root .history-toolbar-card button:disabled {
  opacity: .38 !important;
}
.dzv-generator-root .viewer-status-stack {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 4;
  width: min(360px, calc(100% - 28px));
  pointer-events: none;
}
.dzv-generator-root .viewer-status-stack .viewer-status {
  margin: 0 !important;
}
.dzv-generator-root .viewer-footer .viewer-meta {
  width: auto !important;
  max-width: none !important;
}

.dzv-generator-root .mobile-notice-modal {
  position: fixed;
  inset: 0;
  z-index: 1000002;
  display: grid;
  place-items: center;
  padding: 18px;
}
.dzv-generator-root .mobile-notice-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10,10,10,.58);
  backdrop-filter: blur(4px);
}
.dzv-generator-root .mobile-notice-card {
  position: relative;
  width: min(100%, 420px);
  padding: 22px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(0,0,0,.28);
}
.dzv-generator-root .mobile-notice-card h3 {
  margin: 0 0 10px !important;
  color: #111 !important;
  font-size: 20px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
}
.dzv-generator-root .mobile-notice-card p {
  margin: 0 !important;
  color: #4f545c;
  font-size: 13px;
  line-height: 1.55;
}
.dzv-generator-root .mobile-notice-card button {
  width: 100%;
  min-height: 46px;
  margin-top: 18px;
  border-radius: 999px !important;
  background: #e30613 !important;
}
html.dzv-mobile-notice-open,
html.dzv-mobile-notice-open body {
  overflow: hidden !important;
}

@media (max-width: 1050px) {
  .dzv-generator-root .viewer-toolbar {
    max-width: calc(100% - 330px);
  }
  .dzv-generator-root .view-toolbar-card button,
  .dzv-generator-root .history-toolbar-card button {
    font-size: 10px !important;
  }
}
@media (max-width: 760px) {
  .dzv-generator-root .brand {
    grid-template-columns: 76px minmax(0, 1fr) !important;
  }
  .dzv-generator-root .brand-logo {
    max-width: 72px !important;
  }
  .dzv-generator-root .viewer-toolbar {
    right: 10px !important;
    max-width: none;
  }
  .dzv-generator-root .toolbar-cluster {
    width: 100%;
  }
  .dzv-generator-root .view-toolbar-card {
    flex: 1 1 100%;
  }
  .dzv-generator-root .history-toolbar-card {
    flex: 0 0 auto;
  }
  .dzv-generator-root .viewer-status-stack {
    top: 116px;
    left: 10px;
    right: 10px;
    width: auto;
  }
  .dzv-generator-root .viewer-status.status {
    font-size: 10px !important;
    line-height: 1.35 !important;
  }
}
@media (max-width: 540px) {
  .dzv-generator-root .brand-copy h1 {
    font-size: 16px !important;
  }
  .dzv-generator-root .view-toolbar-card,
  .dzv-generator-root .history-toolbar-card {
    gap: 5px !important;
    padding: 6px !important;
  }
  .dzv-generator-root .view-toolbar-card button {
    padding: 7px 8px !important;
  }
  .dzv-generator-root .history-toolbar-card button > span:last-child {
    display: none;
  }
  .dzv-generator-root .history-toolbar-card button {
    width: 34px;
    justify-content: center;
    padding: 6px !important;
  }
}
.dzv-generator-root [hidden] { display: none !important; }

/* 0.2.4 / generator 1.8.1 – Divitől független, valóban rögzített munkaterület */
html.dzv-generator-viewport-lock,
body.dzv-generator-viewport-lock {
  height: 100% !important;
  overflow: hidden !important;
  overscroll-behavior: none;
}

.dzv-generator-placeholder {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media (min-width: 981px) {
  body > .dzv-generator-root[data-viewport-workspace="true"] {
    --dzv-sticky-top: 0px;
    --dzv-workspace-height: calc(100dvh - var(--dzv-sticky-top));
    --dzv-fixed-left: 12px;
    --dzv-fixed-width: calc(100vw - 24px);
    position: fixed !important;
    inset: var(--dzv-sticky-top) auto auto var(--dzv-fixed-left) !important;
    z-index: 900 !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 8px;
    width: var(--dzv-fixed-width) !important;
    height: var(--dzv-workspace-height) !important;
    min-height: 0 !important;
    max-height: var(--dzv-workspace-height) !important;
    margin: 0 !important;
    padding: 8px !important;
    transform: none !important;
    overflow: hidden !important;
    overscroll-behavior: contain;
    box-sizing: border-box !important;
  }

  body > .dzv-generator-root[data-viewport-workspace="true"] .dzv-howto {
    width: 100%;
    max-width: none;
    min-height: 0;
    margin: 0 !important;
    padding: 8px 10px !important;
    border-radius: 15px;
  }

  body > .dzv-generator-root[data-viewport-workspace="true"] .dzv-howto-head {
    margin-bottom: 6px;
  }

  body > .dzv-generator-root[data-viewport-workspace="true"] .dzv-howto h2 {
    font-size: 16px !important;
  }

  body > .dzv-generator-root[data-viewport-workspace="true"] .dzv-howto-grid {
    gap: 8px;
  }

  body > .dzv-generator-root[data-viewport-workspace="true"] .dzv-howto-card {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 8px;
    min-height: 62px;
    padding: 7px 10px;
    border-radius: 12px;
  }

  body > .dzv-generator-root[data-viewport-workspace="true"] .dzv-howto-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
  }

  body > .dzv-generator-root[data-viewport-workspace="true"] .dzv-howto-icon svg {
    width: 20px;
    height: 20px;
  }

  body > .dzv-generator-root[data-viewport-workspace="true"] .dzv-howto-number {
    top: 3px;
    right: 7px;
    font-size: 31px;
  }

  body > .dzv-generator-root[data-viewport-workspace="true"] .dzv-howto-card h3 {
    margin-bottom: 1px !important;
    font-size: 12px !important;
  }

  body > .dzv-generator-root[data-viewport-workspace="true"] .dzv-howto-card p {
    font-size: 9.5px;
    line-height: 1.25;
  }

  body > .dzv-generator-root[data-viewport-workspace="true"] .dzv-howto-limit {
    margin-top: 1px;
    font-size: 8.5px;
    line-height: 1.2;
  }

  body > .dzv-generator-root[data-viewport-workspace="true"] .app {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  body > .dzv-generator-root[data-viewport-workspace="true"] .panel,
  body > .dzv-generator-root[data-viewport-workspace="true"] .viewer-shell,
  body > .dzv-generator-root[data-viewport-workspace="true"] #viewer {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  body > .dzv-generator-root[data-viewport-workspace="true"] .panel {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  body > .dzv-generator-root[data-viewport-workspace="true"] .viewer-shell {
    overflow: hidden !important;
  }
}

@media (min-width: 981px) and (max-height: 820px) {
  body > .dzv-generator-root[data-viewport-workspace="true"] .dzv-howto-head {
    display: none;
  }

  body > .dzv-generator-root[data-viewport-workspace="true"] .dzv-howto {
    padding: 6px 8px !important;
  }

  body > .dzv-generator-root[data-viewport-workspace="true"] .dzv-howto-card {
    min-height: 54px;
    padding-block: 5px;
  }
}

@media (max-width: 980px) {
  .dzv-generator-root[data-viewport-workspace="false"] {
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* 0.2.7 – mobilos sorrend, negyedik harmonikablokk és viewport-biztos popupok */
.dzv-generator-root .app {
  grid-template-areas:
    "controls viewer"
    "purchase viewer";
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: stretch;
}

.dzv-generator-root .panel {
  grid-area: controls;
  min-height: 0 !important;
}

.dzv-generator-root .viewer-shell {
  grid-area: viewer;
  min-width: 0;
}

.dzv-generator-root .purchase-area {
  grid-area: purchase;
  min-width: 0;
  padding: 12px;
  border: 1px solid #e8e8e8;
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: 0 14px 34px rgba(17, 17, 17, .09);
}

.dzv-generator-root .purchase-area .actions {
  margin-top: 0;
}

.dzv-generator-root .purchase-area .customer-summary {
  margin: 10px 0 0 !important;
  padding: 10px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.dzv-generator-root .purchase-area .customer-summary .section-summary {
  width: 100%;
}

.dzv-generator-root .customer-summary-title {
  gap: 3px;
}

.dzv-generator-root .customer-summary-title span {
  color: #6d7178;
  font-size: 10px;
  line-height: 1.3;
  font-weight: 700;
  text-transform: none;
}

.dzv-generator-root .customer-summary-body {
  padding-top: 10px;
}

/* 0.2.8 – mobilon a Divi keskeny tartalmi sorából viewport-középre húzott generátor.
   A transzformáció továbbra is tiltott, hogy a fixed popupok a tényleges viewporthoz igazodjanak. */
@media (max-width: 980px) {
  .dzv-generator-root {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: calc(50% - 50vw + 10px) !important;
    margin-right: calc(50% - 50vw + 10px) !important;
    transform: none !important;
  }

  .dzv-generator-root .app {
    grid-template-areas:
      "controls"
      "viewer"
      "purchase";
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto;
  }

  .dzv-generator-root .purchase-area {
    width: 100%;
  }
}

/* Mindkét párbeszédablak mindig a tényleges mobil viewporton belül marad. */
.dzv-generator-root .mobile-notice-modal,
.dzv-generator-root .cart-confirm-modal {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 100svh;
  padding:
    max(12px, env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left)) !important;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  place-items: center;
}

.dzv-generator-root .mobile-notice-card,
.dzv-generator-root .cart-confirm-card {
  width: min(100%, 420px);
  max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 760px) {
  .dzv-generator-root .mobile-notice-modal,
  .dzv-generator-root .cart-confirm-modal {
    padding:
      max(9px, env(safe-area-inset-top))
      max(9px, env(safe-area-inset-right))
      max(9px, env(safe-area-inset-bottom))
      max(9px, env(safe-area-inset-left)) !important;
  }

  .dzv-generator-root .mobile-notice-card,
  .dzv-generator-root .cart-confirm-card {
    width: min(100%, 350px);
    max-height: calc(100dvh - 18px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding: 16px !important;
    border-radius: 16px !important;
  }

  .dzv-generator-root .mobile-notice-card h3,
  .dzv-generator-root .cart-confirm-card h3 {
    margin-bottom: 7px !important;
    font-size: 17px !important;
    line-height: 1.2 !important;
  }

  .dzv-generator-root .mobile-notice-card p,
  .dzv-generator-root .cart-confirm-card p {
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  .dzv-generator-root .mobile-notice-card button {
    min-height: 42px;
    margin-top: 13px;
    padding: 10px 12px;
    font-size: 12px;
  }

  .dzv-generator-root .cart-confirm-actions {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 13px;
  }

  .dzv-generator-root .cart-confirm-actions button {
    min-height: 42px;
    padding: 10px 12px;
    font-size: 12px;
  }
}

@media (max-width: 540px) {
  .dzv-generator-root .purchase-area {
    padding: 10px;
    border-radius: 15px;
  }

  .dzv-generator-root .purchase-area .actions {
    grid-template-columns: 1fr !important;
  }

  .dzv-generator-root .customer-summary-grid {
    grid-template-columns: 1fr;
  }
}

/* 0.3.0 – négyelemű formarács és léptetős hullámív-méret */
.dzv-generator-root .shape-choice-grid.base-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  width: 100%;
}
.dzv-generator-root .shape-choice-grid.base-grid .shape-choice {
  width: 100%;
  min-width: 0;
  max-width: none;
  flex: none;
}
.dzv-generator-root .wave-fields {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 122, 0, 0.035);
}
.dzv-generator-root .wave-fields > div {
  min-width: 0;
}
.dzv-generator-root .wave-help-label {
  justify-content: flex-start;
  margin-bottom: 6px;
}
.dzv-generator-root .wave-help-label .help-trigger {
  width: 19px;
  height: 19px;
  min-width: 19px;
  min-height: 19px;
  font-size: 10px !important;
}
.dzv-generator-root .wave-diameter-stepper input[readonly] {
  cursor: default;
  background: #fff;
}
.dzv-generator-root .shape-choice[data-base-shape="scalloped-rectangle"] .shape-icon path {
  fill: rgba(255, 122, 0, .08);
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
}
@media (max-width: 680px) {
  .dzv-generator-root .shape-choice-grid.base-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }
  .dzv-generator-root .shape-choice-grid.base-grid .shape-choice {
    width: 100%;
    min-width: 0;
    padding-left: 3px;
    padding-right: 3px;
  }
}