* { margin: 0; padding: 0; box-sizing: border-box; }

  body {
    background: #282C34;
    font-family: Consolas, monospace;
    font-size: 14px;
    margin: 0;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    position: relative;
  }

  /* ── Top Menu Bar ── */
  #top-menubar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 28px;
    background: #c0c0c0;
    border-bottom: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    display: flex;
    align-items: stretch;
    z-index: 999999;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 12px;
    user-select: none;
  }

  .menubar-item {
    position: relative;
    display: flex;
    align-items: center;
  }

  .menubar-label {
    padding: 2px 10px;
    cursor: default;
    line-height: 24px;
  }

  .menubar-item:hover .menubar-label,
  .menubar-item.active .menubar-label {
    background: #000080;
    color: #fff;
  }

  .menubar-dropdown {
    display: none;
    position: fixed;
    background: #c0c0c0;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    z-index: 999998;
    min-width: 200px;
    padding: 2px 0;
  }

  .menubar-item.active .menubar-dropdown {
    display: block;
  }

  .menubar-action {
    padding: 4px 24px 4px 28px;
    cursor: default;
    white-space: nowrap;
    position: relative;
  }

  .menubar-action:hover:not(.disabled) {
    background: #000080;
    color: #fff;
  }

  .menubar-action.disabled {
    color: #808080;
    cursor: default;
  }

  .menubar-separator {
    height: 1px;
    background: #808080;
    margin: 3px 2px;
    border-bottom: 1px solid #ffffff;
  }

  .menubar-shortcut {
    float: right;
    margin-left: 24px;
    color: #808080;
  }

  .menubar-action:hover:not(.disabled) .menubar-shortcut {
    color: #c0c0c0;
  }

  .menubar-soon {
    color: #808080;
    font-style: italic;
  }

  .menubar-toggle.checked::before {
    content: '\2713';
    position: absolute;
    left: 8px;
    font-size: 13px;
    font-weight: bold;
  }

  .menubar-action:hover:not(.disabled) .menubar-soon {
    color: #c0c0c0;
  }

  /* Interactive dot grid canvas */
  #dot-canvas {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
  }

  .window {
    background: #c0c0c0;
    border: 3px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    width: 720px;
    position: absolute;
    min-width: 328px;
    min-height: 480px;
    z-index: 1;
  }

  .window.maximized {
    width: 100vw !important;
    height: calc(100vh - 28px) !important;
    left: 0 !important;
    top: 28px !important;
  }

  .window.minimized {
    width: 360px !important;
    min-height: 0;
    height: auto !important;
  }

  .window.minimized .window-body {
    display: none;
  }

  .window.minimized .btn-edit,
  .window.minimized .btn-save,
  .window.minimized .btn-print,
  .window.minimized .btn-duplicate {
    display: none;
  }

  /* Resize handles */
  .resize-handle {
    position: absolute;
    z-index: 10;
  }
  .resize-n { top: -4px; left: 4px; right: 4px; height: 8px; cursor: n-resize; }
  .resize-s { bottom: -4px; left: 4px; right: 4px; height: 8px; cursor: s-resize; }
  .resize-e { right: -4px; top: 4px; bottom: 4px; width: 8px; cursor: e-resize; }
  .resize-w { left: -4px; top: 4px; bottom: 4px; width: 8px; cursor: w-resize; }
  .resize-nw { top: -4px; left: -4px; width: 12px; height: 12px; cursor: nw-resize; }
  .resize-ne { top: -4px; right: -4px; width: 12px; height: 12px; cursor: ne-resize; }
  .resize-sw { bottom: -4px; left: -4px; width: 12px; height: 12px; cursor: sw-resize; }
  .resize-se { bottom: -4px; right: -4px; width: 12px; height: 12px; cursor: se-resize; }

  .window.maximized .resize-handle,
  .window.minimized .resize-handle {
    display: none;
  }

  .title-bar {
    background: linear-gradient(90deg, #000080, #1084d0);
    color: #ffffff;
    font-weight: bold;
    font-size: 12px;
    padding: 5px 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    user-select: none;
    cursor: grab;
  }

  .title-bar:active {
    cursor: grabbing;
  }

  .title-bar-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  .title-bar-controls {
    display: flex;
    gap: 0px;
    margin-left: auto;
  }

  .title-bar-controls .btn-close {
    margin-left: 0px;
  }

  .title-bar-controls button {
    width: 18px;
    height: 16px;
    background: #c0c0c0;
    border: 1px solid;
    border-color: #ffffff #000000 #000000 #ffffff;
    box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #808080;
    font-size: 0;
    line-height: 0;
    cursor: pointer;
    padding: 0;
    position: relative;
    color: transparent;
    overflow: hidden;
  }

  .title-bar-controls button:active {
    border-color: #000000 #ffffff #ffffff #000000;
    box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #dfdfdf;
  }

  .title-bar-controls button:active::before,
  .title-bar-controls button:active::after {
    transform: translate(1px, 1px);
  }

  /* Focus indicators */
  input[type="text"]:focus,
  input[type="number"]:focus,
  .dropdown-trigger:focus,
  .xp-button:focus,
  button:focus {
    outline: 2px solid #0066ff;
    outline-offset: -1px;
  }
  .btn-save:focus,
  .btn-print:focus,
  .btn-edit:focus,
  .btn-duplicate:focus,
  .btn-minimize:focus,
  .btn-maximize:focus,
  .btn-close:focus {
    outline: 1px dotted #000;
    outline-offset: -3px;
  }
  body.dark-mode input[type="text"]:focus,
  body.dark-mode input[type="number"]:focus,
  body.dark-mode .dropdown-trigger:focus,
  body.dark-mode .xp-button:focus,
  body.dark-mode button:focus {
    outline-color: #6699ff;
  }
  body.dark-mode .btn-save:focus,
  body.dark-mode .btn-print:focus,
  body.dark-mode .btn-duplicate:focus,
  body.dark-mode .btn-minimize:focus,
  body.dark-mode .btn-maximize:focus,
  body.dark-mode .btn-close:focus {
    outline-color: #aaa;
  }

  /* Minimize: small bar at bottom-left */
  .btn-minimize::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 4px;
    width: 6px;
    height: 2px;
    background: #000;
  }

  /* Maximize: rectangle with thick top border */
  .btn-maximize::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 4px;
    width: 9px;
    height: 8px;
    border: 1px solid #000;
    border-top-width: 2px;
    background: transparent;
    box-sizing: border-box;
  }

  /* Close: pixel X using box-shadows (centered in 16x14 button, accounting for 1px border + 1px inset) */
  .btn-close::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow:
      3px 2px 0 0 #000,  4px 2px 0 0 #000,  9px 2px 0 0 #000, 10px 2px 0 0 #000,
      4px 3px 0 0 #000,  5px 3px 0 0 #000,  8px 3px 0 0 #000,  9px 3px 0 0 #000,
      5px 4px 0 0 #000,  6px 4px 0 0 #000,  7px 4px 0 0 #000,  8px 4px 0 0 #000,
      6px 5px 0 0 #000,  7px 5px 0 0 #000,
      5px 6px 0 0 #000,  6px 6px 0 0 #000,  7px 6px 0 0 #000,  8px 6px 0 0 #000,
      4px 7px 0 0 #000,  5px 7px 0 0 #000,  8px 7px 0 0 #000,  9px 7px 0 0 #000,
      3px 8px 0 0 #000,  4px 8px 0 0 #000,  9px 8px 0 0 #000, 10px 8px 0 0 #000;
  }

  /* Print: printer icon using box-shadows (green tint) */
  .btn-print::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow:
      /* paper top */
      5px 1px 0 0 #060, 6px 1px 0 0 #060, 7px 1px 0 0 #060, 8px 1px 0 0 #060, 9px 1px 0 0 #060,
      5px 2px 0 0 #060, 6px 2px 0 0 #cec, 7px 2px 0 0 #cec, 8px 2px 0 0 #cec, 9px 2px 0 0 #060,
      5px 3px 0 0 #060, 6px 3px 0 0 #cec, 7px 3px 0 0 #cec, 8px 3px 0 0 #cec, 9px 3px 0 0 #060,
      /* printer body */
      3px 4px 0 0 #060, 4px 4px 0 0 #060, 5px 4px 0 0 #060, 6px 4px 0 0 #060, 7px 4px 0 0 #060, 8px 4px 0 0 #060, 9px 4px 0 0 #060, 10px 4px 0 0 #060, 11px 4px 0 0 #060,
      3px 5px 0 0 #060, 4px 5px 0 0 #4a4, 5px 5px 0 0 #4a4, 6px 5px 0 0 #4a4, 7px 5px 0 0 #4a4, 8px 5px 0 0 #4a4, 9px 5px 0 0 #4a4, 10px 5px 0 0 #4a4, 11px 5px 0 0 #060,
      3px 6px 0 0 #060, 4px 6px 0 0 #4a4, 5px 6px 0 0 #4a4, 6px 6px 0 0 #4a4, 7px 6px 0 0 #4a4, 8px 6px 0 0 #4a4, 9px 6px 0 0 #4a4, 10px 6px 0 0 #0f0, 11px 6px 0 0 #060,
      3px 7px 0 0 #060, 4px 7px 0 0 #060, 5px 7px 0 0 #060, 6px 7px 0 0 #060, 7px 7px 0 0 #060, 8px 7px 0 0 #060, 9px 7px 0 0 #060, 10px 7px 0 0 #060, 11px 7px 0 0 #060,
      /* paper output */
      4px 8px 0 0 #060, 5px 8px 0 0 #cec, 6px 8px 0 0 #cec, 7px 8px 0 0 #cec, 8px 8px 0 0 #cec, 9px 8px 0 0 #cec, 10px 8px 0 0 #060,
      4px 9px 0 0 #060, 5px 9px 0 0 #cec, 6px 9px 0 0 #060, 7px 9px 0 0 #cec, 8px 9px 0 0 #060, 9px 9px 0 0 #cec, 10px 9px 0 0 #060,
      4px 10px 0 0 #060, 5px 10px 0 0 #060, 6px 10px 0 0 #060, 7px 10px 0 0 #060, 8px 10px 0 0 #060, 9px 10px 0 0 #060, 10px 10px 0 0 #060;
  }

  /* Save: floppy disk icon using box-shadows (blue tint) */
  .btn-save::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow:
      /* top edge / shell */
      4px 1px 0 0 #048, 5px 1px 0 0 #048, 6px 1px 0 0 #048, 7px 1px 0 0 #048, 8px 1px 0 0 #048, 9px 1px 0 0 #048, 10px 1px 0 0 #048,
      3px 2px 0 0 #048, 4px 2px 0 0 #48c, 5px 2px 0 0 #cdf, 6px 2px 0 0 #cdf, 7px 2px 0 0 #cdf, 8px 2px 0 0 #cdf, 9px 2px 0 0 #cdf, 10px 2px 0 0 #48c, 11px 2px 0 0 #048,
      3px 3px 0 0 #048, 4px 3px 0 0 #48c, 5px 3px 0 0 #cdf, 6px 3px 0 0 #cdf, 7px 3px 0 0 #cdf, 8px 3px 0 0 #cdf, 9px 3px 0 0 #cdf, 10px 3px 0 0 #48c, 11px 3px 0 0 #048,
      3px 4px 0 0 #048, 4px 4px 0 0 #48c, 5px 4px 0 0 #cdf, 6px 4px 0 0 #cdf, 7px 4px 0 0 #cdf, 8px 4px 0 0 #cdf, 9px 4px 0 0 #cdf, 10px 4px 0 0 #48c, 11px 4px 0 0 #048,
      3px 5px 0 0 #048, 4px 5px 0 0 #48c, 5px 5px 0 0 #48c, 6px 5px 0 0 #48c, 7px 5px 0 0 #48c, 8px 5px 0 0 #48c, 9px 5px 0 0 #48c, 10px 5px 0 0 #48c, 11px 5px 0 0 #048,
      3px 6px 0 0 #048, 4px 6px 0 0 #48c, 5px 6px 0 0 #48c, 6px 6px 0 0 #48c, 7px 6px 0 0 #48c, 8px 6px 0 0 #48c, 9px 6px 0 0 #48c, 10px 6px 0 0 #48c, 11px 6px 0 0 #048,
      /* label area */
      3px 7px 0 0 #048, 4px 7px 0 0 #cdf, 5px 7px 0 0 #cdf, 6px 7px 0 0 #cdf, 7px 7px 0 0 #cdf, 8px 7px 0 0 #cdf, 9px 7px 0 0 #cdf, 10px 7px 0 0 #cdf, 11px 7px 0 0 #048,
      3px 8px 0 0 #048, 4px 8px 0 0 #cdf, 5px 8px 0 0 #048, 6px 8px 0 0 #cdf, 7px 8px 0 0 #048, 8px 8px 0 0 #cdf, 9px 8px 0 0 #048, 10px 8px 0 0 #cdf, 11px 8px 0 0 #048,
      3px 9px 0 0 #048, 4px 9px 0 0 #cdf, 5px 9px 0 0 #048, 6px 9px 0 0 #cdf, 7px 9px 0 0 #048, 8px 9px 0 0 #cdf, 9px 9px 0 0 #cdf, 10px 9px 0 0 #cdf, 11px 9px 0 0 #048,
      3px 10px 0 0 #048, 4px 10px 0 0 #048, 5px 10px 0 0 #048, 6px 10px 0 0 #048, 7px 10px 0 0 #048, 8px 10px 0 0 #048, 9px 10px 0 0 #048, 10px 10px 0 0 #048, 11px 10px 0 0 #048;
  }

  /* Margin to separate save+print+edit+duplicate from the minimize/maximize/close group */
  .title-bar-controls .btn-edit {
    margin-right: 2px;
  }
  .title-bar-controls .btn-save {
    margin-right: 2px;
  }
  .title-bar-controls .btn-print {
    margin-right: 2px;
  }
  .title-bar-controls .btn-duplicate {
    margin-right: 12px;
  }

  /* Duplicate: overlapping squares (pixel art style, colored) */
  .btn-duplicate::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 7px;
    height: 7px;
    border: 1px solid #7722aa;
    background: transparent;
    box-sizing: border-box;
  }
  .btn-duplicate::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    width: 7px;
    height: 7px;
    border: 1px solid #7722aa;
    background: #c0c0c0;
    box-sizing: border-box;
  }

  /* Snap: square box glyph */
  .title-bar-controls .btn-snap::before {
    content: '\22A1';
    font-size: 12px;
    line-height: 1;
  }

  .window-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1;
    min-height: 0;
  }

  #app-window > .window-body {
    overflow: hidden;
    padding: 12px;
  }

  .window.maximized,
  .window:not(.minimized) {
    display: flex;
    flex-direction: column;
  }

  .field-row {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
  }

  .field-row label {
    width: 72px;
    text-align: right;
    margin-right: 12px;
    flex-shrink: 0;
  }

  .format-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
  }

  .format-row label {
    width: 72px;
    text-align: right;
    flex-shrink: 0;
  }

  .format-row .radio-group {
    flex: 1;
  }

  .format-row .edit-btn {
    flex-shrink: 0;
  }

  input[type="text"] {
    flex: 1;
    font-family: inherit;
    font-size: 14px;
    padding: 4px 8px;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    background: #ffffff;
    outline: none;
    height: 30px;
  }

  .radio-group {
    display: flex;
    align-items: center;
    gap: 20px;
  }

  .radio-group label {
    width: auto;
    margin-right: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
  }

  .png-scale-inline {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: -8px;
  }

  .png-scale-inline input[type="range"] {
    width: 60px;
    height: 16px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    outline: none;
  }

  .png-scale-inline input[type="range"]::-webkit-slider-runnable-track {
    height: 4px;
    background: #ffffff;
    border: 1px solid;
    border-color: #808080 #ffffff #ffffff #808080;
  }

  .png-scale-inline input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 9px;
    height: 14px;
    margin-top: -6px;
    background: #c0c0c0;
    border: 1px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
  }

  .png-scale-inline input[type="range"]::-moz-range-track {
    height: 4px;
    background: #ffffff;
    border: 1px solid;
    border-color: #808080 #ffffff #ffffff #808080;
  }

  .png-scale-inline input[type="range"]::-moz-range-thumb {
    width: 9px;
    height: 14px;
    background: #c0c0c0;
    border: 1px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    border-radius: 0;
  }

  .png-scale-value {
    font-size: 11px;
    min-width: 18px;
  }

  input[type="radio"] {
    margin: 0;
    cursor: pointer;
    width: 16px;
    height: 16px;
  }

  .output-panel {
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    background: #ffffff;
    min-height: 80px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    margin-bottom: 8px;
    overflow: hidden;
    min-width: 0;
  }

  .output-panel img {
    max-width: 100%;
    max-height: 100%;
    min-height: 0;
    min-width: 0;
    object-fit: contain;
    image-rendering: pixelated;
  }

  .output-panel.multi-barcode {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-content: start;
    padding: 8px;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .output-panel.multi-barcode img {
    max-width: 48%;
    max-height: 200px;
    flex-shrink: 0;
    object-fit: contain;
  }

  .output-panel .placeholder {
    color: #808080;
    font-style: italic;
    font-size: 15px;
    white-space: nowrap;
  }

  .status-bar {
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    padding: 4px 8px;
    font-size: 14px;
    color: #000;
    background: #c0c0c0;
  }

  .status-bar.error {
    color: #cc0000;
  }

  /* Custom dropdown trigger */
  .custom-dropdown {
    flex: 1;
    position: relative;
  }

  .dropdown-trigger {
    width: 100%;
    height: 30px;
    background: #ffffff;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    padding: 4px 28px 4px 8px;
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    position: relative;
  }

  .dropdown-arrow {
    position: absolute;
    right: 2px;
    top: 2px;
    width: 22px;
    height: calc(100% - 4px);
    background: #c0c0c0;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    pointer-events: none;
  }

  .dropdown-trigger:active .dropdown-arrow {
    border-color: #808080 #ffffff #ffffff #808080;
  }

  /* Settings dropdown options */
  .dropdown-options {
    display: none;
    position: fixed;
    z-index: 102;
    background: #ffffff;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    max-height: 180px;
    overflow-y: auto;
  }

  .dropdown-options.open {
    display: block;
  }

  .dropdown-option {
    padding: 3px 8px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
  }

  .dropdown-option:hover {
    background: #000080;
    color: #ffffff;
  }

  .dropdown-option.selected {
    background: #000080;
    color: #ffffff;
  }

  .dropdown-option.selected:hover {
    background: #0000a0;
  }

  /* Popup window */
  .type-popup {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 2px;
    z-index: 1000;
    background: #c0c0c0;
    border: 3px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    width: 300px;
    max-width: calc(100vw - 24px);
  }

  .type-popup.open {
    display: block;
  }

  #settings-popup {
    z-index: 999997;
  }

  .popup-title-bar {
    background: linear-gradient(90deg, #000080, #1084d0);
    color: #ffffff;
    font-weight: bold;
    font-size: 14px;
    padding: 3px 6px;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .popup-title-icon {
    width: 16px;
    height: 16px;
    background: #c0c0c0;
    border: 1px solid #808080;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: #000;
    flex-shrink: 0;
  }

  .popup-body {
    padding: 6px;
  }

  .popup-list {
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    background: #ffffff;
    max-height: 380px;
    overflow-y: auto;
  }

  .popup-section-header {
    padding: 3px 8px;
    font-weight: bold;
    font-size: 14px;
    color: #000;
    background: #c0c0c0;
    border-bottom: 1px solid #808080;
    user-select: none;
  }

  .popup-item {
    padding: 4px 8px 4px 12px;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .popup-item:hover,
  .popup-item.hovered {
    background: #000080;
    color: #ffffff;
  }

  .popup-item.selected {
    font-weight: bold;
  }

  .popup-item-preview {
    width: 60px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
    image-rendering: pixelated;
    background: #ffffff;
  }

  .popup-item:hover .popup-item-preview,
  .popup-item.hovered .popup-item-preview {
    filter: invert(1);
  }

  .popup-description {
    margin-top: 6px;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    background: #c0c0c0;
    padding: 4px 8px;
    font-size: 13px;
    color: #000;
    min-height: 36px;
    line-height: 1.3;
  }

  /* Expanded type popup */
  .type-popup.expanded {
    width: 340px;
    max-width: calc(100vw - 24px);
  }

  .type-popup.expanded .popup-list {
    max-height: 460px;
  }

  /* Search bar in expanded popup */
  .popup-search-row {
    padding: 4px 6px;
    background: #c0c0c0;
    border-bottom: 1px solid #808080;
    position: sticky;
    top: 0;
    z-index: 1;
  }

  .popup-search-input {
    width: 100%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 13px;
    padding: 3px 6px;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    background: #ffffff;
    outline: none;
    box-sizing: border-box;
    height: 24px;
  }

  /* "More Types..." row */
  .popup-more-row {
    text-align: center;
    color: #0000aa;
    font-style: italic;
    border-top: 1px solid #c0c0c0;
    cursor: pointer;
  }

  .popup-more-row:hover {
    background: #000080;
    color: #ffffff;
  }

  /* "Back" row */
  .popup-back-row {
    color: #0000aa;
    border-bottom: 1px solid #c0c0c0;
    cursor: pointer;
  }

  .popup-back-row:hover {
    background: #000080;
    color: #ffffff;
  }

  /* Dark mode for expanded popup elements */
  body.dark-mode .popup-search-row {
    background: #2a2a3a;
    border-bottom-color: #555;
  }

  body.dark-mode .popup-search-input {
    background: #1e1e2e;
    color: #e0e0f0;
    border-color: #555 #222 #222 #555;
  }

  body.dark-mode .popup-more-row {
    color: #8888ff;
    border-top-color: #444;
  }

  body.dark-mode .popup-more-row:hover {
    background: #000080;
    color: #ffffff;
  }

  body.dark-mode .popup-back-row {
    color: #8888ff;
    border-bottom-color: #444;
  }

  body.dark-mode .popup-back-row:hover {
    background: #000080;
    color: #ffffff;
  }

  /* Pop Out button row */
  .button-row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
  }

  .button-spacer {
    flex: 1;
  }

  .button-row .settings-btn {
    margin-left: auto;
  }

  .xp-button {
    font-family: inherit;
    font-size: 14px;
    padding: 4px 16px;
    background: #c0c0c0;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    cursor: pointer;
    height: 28px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #000;
  }

  .xp-button:active:not(:disabled) {
    border-color: #808080 #ffffff #ffffff #808080;
  }

  .xp-button:disabled {
    color: #808080;
    cursor: default;
  }

  .popout-btn {
    background: #c0c0c0;
    color: #000;
    font-weight: bold;
    position: relative;
    padding-left: 22px;
  }

  .popout-btn::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 50%;
    margin-top: -5px;
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow:
      /* back window top border */
      4px 0px 0 0 #048, 5px 0px 0 0 #048, 6px 0px 0 0 #048, 7px 0px 0 0 #048, 8px 0px 0 0 #048, 9px 0px 0 0 #048,
      /* back window title bar */
      4px 1px 0 0 #048, 5px 1px 0 0 #69f, 6px 1px 0 0 #69f, 7px 1px 0 0 #69f, 8px 1px 0 0 #69f, 9px 1px 0 0 #048,
      /* front window top border + back body */
      1px 2px 0 0 #048, 2px 2px 0 0 #048, 3px 2px 0 0 #048, 4px 2px 0 0 #048, 5px 2px 0 0 #048, 6px 2px 0 0 #048, 7px 2px 0 0 #cdf, 8px 2px 0 0 #cdf, 9px 2px 0 0 #048,
      /* front window title bar + back body */
      1px 3px 0 0 #048, 2px 3px 0 0 #69f, 3px 3px 0 0 #69f, 4px 3px 0 0 #69f, 5px 3px 0 0 #69f, 6px 3px 0 0 #048, 7px 3px 0 0 #cdf, 8px 3px 0 0 #cdf, 9px 3px 0 0 #048,
      /* front body + back bottom border */
      1px 4px 0 0 #048, 2px 4px 0 0 #cdf, 3px 4px 0 0 #cdf, 4px 4px 0 0 #cdf, 5px 4px 0 0 #cdf, 6px 4px 0 0 #048, 7px 4px 0 0 #048, 8px 4px 0 0 #048, 9px 4px 0 0 #048,
      /* front body */
      1px 5px 0 0 #048, 2px 5px 0 0 #cdf, 3px 5px 0 0 #cdf, 4px 5px 0 0 #cdf, 5px 5px 0 0 #cdf, 6px 5px 0 0 #048,
      1px 6px 0 0 #048, 2px 6px 0 0 #cdf, 3px 6px 0 0 #cdf, 4px 6px 0 0 #cdf, 5px 6px 0 0 #cdf, 6px 6px 0 0 #048,
      1px 7px 0 0 #048, 2px 7px 0 0 #cdf, 3px 7px 0 0 #cdf, 4px 7px 0 0 #cdf, 5px 7px 0 0 #cdf, 6px 7px 0 0 #048,
      /* front bottom border */
      1px 8px 0 0 #048, 2px 8px 0 0 #048, 3px 8px 0 0 #048, 4px 8px 0 0 #048, 5px 8px 0 0 #048, 6px 8px 0 0 #048;
  }

  .save-btn {
    background: #c0c0c0;
    color: #000;
    font-weight: bold;
    position: relative;
    padding-left: 22px;
  }

  .save-btn::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 50%;
    margin-top: -5px;
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow:
      2px 0px 0 0 #048, 3px 0px 0 0 #048, 4px 0px 0 0 #048, 5px 0px 0 0 #048, 6px 0px 0 0 #048, 7px 0px 0 0 #048, 8px 0px 0 0 #048,
      1px 1px 0 0 #048, 2px 1px 0 0 #48c, 3px 1px 0 0 #cdf, 4px 1px 0 0 #cdf, 5px 1px 0 0 #cdf, 6px 1px 0 0 #cdf, 7px 1px 0 0 #cdf, 8px 1px 0 0 #48c, 9px 1px 0 0 #048,
      1px 2px 0 0 #048, 2px 2px 0 0 #48c, 3px 2px 0 0 #cdf, 4px 2px 0 0 #cdf, 5px 2px 0 0 #cdf, 6px 2px 0 0 #cdf, 7px 2px 0 0 #cdf, 8px 2px 0 0 #48c, 9px 2px 0 0 #048,
      1px 3px 0 0 #048, 2px 3px 0 0 #48c, 3px 3px 0 0 #48c, 4px 3px 0 0 #48c, 5px 3px 0 0 #48c, 6px 3px 0 0 #48c, 7px 3px 0 0 #48c, 8px 3px 0 0 #48c, 9px 3px 0 0 #048,
      1px 4px 0 0 #048, 2px 4px 0 0 #48c, 3px 4px 0 0 #48c, 4px 4px 0 0 #48c, 5px 4px 0 0 #48c, 6px 4px 0 0 #48c, 7px 4px 0 0 #48c, 8px 4px 0 0 #48c, 9px 4px 0 0 #048,
      1px 5px 0 0 #048, 2px 5px 0 0 #cdf, 3px 5px 0 0 #cdf, 4px 5px 0 0 #cdf, 5px 5px 0 0 #cdf, 6px 5px 0 0 #cdf, 7px 5px 0 0 #cdf, 8px 5px 0 0 #cdf, 9px 5px 0 0 #048,
      1px 6px 0 0 #048, 2px 6px 0 0 #cdf, 3px 6px 0 0 #048, 4px 6px 0 0 #cdf, 5px 6px 0 0 #048, 6px 6px 0 0 #cdf, 7px 6px 0 0 #048, 8px 6px 0 0 #cdf, 9px 6px 0 0 #048,
      1px 7px 0 0 #048, 2px 7px 0 0 #cdf, 3px 7px 0 0 #048, 4px 7px 0 0 #cdf, 5px 7px 0 0 #048, 6px 7px 0 0 #cdf, 7px 7px 0 0 #cdf, 8px 7px 0 0 #cdf, 9px 7px 0 0 #048,
      1px 8px 0 0 #048, 2px 8px 0 0 #048, 3px 8px 0 0 #048, 4px 8px 0 0 #048, 5px 8px 0 0 #048, 6px 8px 0 0 #048, 7px 8px 0 0 #048, 8px 8px 0 0 #048, 9px 8px 0 0 #048;
  }

  /* Pop-out windows */
  .popout-window {
    min-width: 280px;
    min-height: 180px;
  }

  .popout-window .window-body {
    padding: 4px;
    gap: 4px;
    overflow: hidden;
  }

  .popout-window .status-bar {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
  }


  /* Edit popout — Barcode tab field rows */
  .edit-field-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
  }

  .edit-field-row label {
    width: 80px;
    flex-shrink: 0;
    font-size: 11px;
  }

  .edit-barcode-input {
    font-family: inherit;
    font-size: 12px;
    padding: 2px 4px;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    background: #ffffff;
    color: #000;
    flex: 1;
    min-width: 0;
  }

  .edit-format-row {
    display: flex;
    gap: 12px;
    align-items: center;
  }

  .edit-format-row label {
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 3px;
    cursor: pointer;
  }

  .popout-window .output-panel {
    padding: 4px;
    margin-bottom: 0;
    min-height: 60px;
  }

  /* Window focus / z-index management */
  .window.focused .title-bar {
    background: linear-gradient(90deg, #000080, #1084d0);
  }

  .window:not(.focused) .title-bar {
    background: linear-gradient(90deg, #808080, #b0b0b0);
  }

  /* Settings button */
  .settings-btn {
    background: #c0c0c0;
    color: #000;
    font-weight: bold;
    position: relative;
    padding-left: 22px;
  }

  .settings-btn::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 50%;
    margin-top: -5px;
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow:
      /* top teeth */
      3px 0px 0 0 #c00, 5px 0px 0 0 #c00, 7px 0px 0 0 #c00,
      /* top ring */
      3px 1px 0 0 #c00, 4px 1px 0 0 #c00, 5px 1px 0 0 #c00, 6px 1px 0 0 #c00, 7px 1px 0 0 #c00,
      /* left tooth + outer ring + right tooth */
      1px 2px 0 0 #c00, 2px 2px 0 0 #c00, 3px 2px 0 0 #c00, 4px 2px 0 0 #fcc, 5px 2px 0 0 #fcc, 6px 2px 0 0 #fcc, 7px 2px 0 0 #c00, 8px 2px 0 0 #c00, 9px 2px 0 0 #c00,
      /* inner ring top */
      2px 3px 0 0 #c00, 3px 3px 0 0 #fcc, 4px 3px 0 0 #fcc, 6px 3px 0 0 #fcc, 7px 3px 0 0 #fcc, 8px 3px 0 0 #c00,
      /* left tooth + center hole + right tooth */
      1px 4px 0 0 #c00, 2px 4px 0 0 #c00, 3px 4px 0 0 #fcc, 7px 4px 0 0 #fcc, 8px 4px 0 0 #c00, 9px 4px 0 0 #c00,
      /* inner ring bottom */
      2px 5px 0 0 #c00, 3px 5px 0 0 #fcc, 4px 5px 0 0 #fcc, 6px 5px 0 0 #fcc, 7px 5px 0 0 #fcc, 8px 5px 0 0 #c00,
      /* left tooth + outer ring + right tooth */
      1px 6px 0 0 #c00, 2px 6px 0 0 #c00, 3px 6px 0 0 #c00, 4px 6px 0 0 #fcc, 5px 6px 0 0 #fcc, 6px 6px 0 0 #fcc, 7px 6px 0 0 #c00, 8px 6px 0 0 #c00, 9px 6px 0 0 #c00,
      /* bottom ring */
      3px 7px 0 0 #c00, 4px 7px 0 0 #c00, 5px 7px 0 0 #c00, 6px 7px 0 0 #c00, 7px 7px 0 0 #c00,
      /* bottom teeth */
      3px 8px 0 0 #c00, 5px 8px 0 0 #c00, 7px 8px 0 0 #c00;
  }

  /* Settings window title bar icon */
  .settings-title-icon {
    display: inline-block;
    position: relative;
    width: 13px;
    height: 11px;
    margin-right: 4px;
    vertical-align: middle;
  }

  .settings-title-icon::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow:
      /* top teeth */
      3px 0px 0 0 #fff, 5px 0px 0 0 #fff, 7px 0px 0 0 #fff,
      /* top ring */
      3px 1px 0 0 #fff, 4px 1px 0 0 #fff, 5px 1px 0 0 #fff, 6px 1px 0 0 #fff, 7px 1px 0 0 #fff,
      /* left tooth + outer ring + right tooth */
      1px 2px 0 0 #fff, 2px 2px 0 0 #fff, 3px 2px 0 0 #fff, 4px 2px 0 0 #fcc, 5px 2px 0 0 #fcc, 6px 2px 0 0 #fcc, 7px 2px 0 0 #fff, 8px 2px 0 0 #fff, 9px 2px 0 0 #fff,
      /* inner ring top */
      2px 3px 0 0 #fff, 3px 3px 0 0 #fcc, 4px 3px 0 0 #fcc, 6px 3px 0 0 #fcc, 7px 3px 0 0 #fcc, 8px 3px 0 0 #fff,
      /* left tooth + center hole + right tooth */
      1px 4px 0 0 #fff, 2px 4px 0 0 #fff, 3px 4px 0 0 #fcc, 7px 4px 0 0 #fcc, 8px 4px 0 0 #fff, 9px 4px 0 0 #fff,
      /* inner ring bottom */
      2px 5px 0 0 #fff, 3px 5px 0 0 #fcc, 4px 5px 0 0 #fcc, 6px 5px 0 0 #fcc, 7px 5px 0 0 #fcc, 8px 5px 0 0 #fff,
      /* left tooth + outer ring + right tooth */
      1px 6px 0 0 #fff, 2px 6px 0 0 #fff, 3px 6px 0 0 #fff, 4px 6px 0 0 #fcc, 5px 6px 0 0 #fcc, 6px 6px 0 0 #fcc, 7px 6px 0 0 #fff, 8px 6px 0 0 #fff, 9px 6px 0 0 #fff,
      /* bottom ring */
      3px 7px 0 0 #fff, 4px 7px 0 0 #fff, 5px 7px 0 0 #fff, 6px 7px 0 0 #fff, 7px 7px 0 0 #fff,
      /* bottom teeth */
      3px 8px 0 0 #fff, 5px 8px 0 0 #fff, 7px 8px 0 0 #fff;
  }

  .print-btn {
    background: #c0c0c0;
    color: #000;
    font-weight: bold;
    position: relative;
    padding-left: 22px;
  }

  .print-btn::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 50%;
    margin-top: -6px;
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow:
      /* paper top */
      3px 0px 0 0 #060, 4px 0px 0 0 #060, 5px 0px 0 0 #060, 6px 0px 0 0 #060, 7px 0px 0 0 #060,
      3px 1px 0 0 #060, 4px 1px 0 0 #cec, 5px 1px 0 0 #cec, 6px 1px 0 0 #cec, 7px 1px 0 0 #060,
      3px 2px 0 0 #060, 4px 2px 0 0 #cec, 5px 2px 0 0 #cec, 6px 2px 0 0 #cec, 7px 2px 0 0 #060,
      /* printer body */
      1px 3px 0 0 #060, 2px 3px 0 0 #060, 3px 3px 0 0 #060, 4px 3px 0 0 #060, 5px 3px 0 0 #060, 6px 3px 0 0 #060, 7px 3px 0 0 #060, 8px 3px 0 0 #060, 9px 3px 0 0 #060,
      1px 4px 0 0 #060, 2px 4px 0 0 #4a4, 3px 4px 0 0 #4a4, 4px 4px 0 0 #4a4, 5px 4px 0 0 #4a4, 6px 4px 0 0 #4a4, 7px 4px 0 0 #4a4, 8px 4px 0 0 #4a4, 9px 4px 0 0 #060,
      1px 5px 0 0 #060, 2px 5px 0 0 #4a4, 3px 5px 0 0 #4a4, 4px 5px 0 0 #4a4, 5px 5px 0 0 #4a4, 6px 5px 0 0 #4a4, 7px 5px 0 0 #4a4, 8px 5px 0 0 #0f0, 9px 5px 0 0 #060,
      1px 6px 0 0 #060, 2px 6px 0 0 #060, 3px 6px 0 0 #060, 4px 6px 0 0 #060, 5px 6px 0 0 #060, 6px 6px 0 0 #060, 7px 6px 0 0 #060, 8px 6px 0 0 #060, 9px 6px 0 0 #060,
      /* paper output */
      2px 7px 0 0 #060, 3px 7px 0 0 #cec, 4px 7px 0 0 #cec, 5px 7px 0 0 #cec, 6px 7px 0 0 #cec, 7px 7px 0 0 #cec, 8px 7px 0 0 #060,
      2px 8px 0 0 #060, 3px 8px 0 0 #cec, 4px 8px 0 0 #060, 5px 8px 0 0 #cec, 6px 8px 0 0 #060, 7px 8px 0 0 #cec, 8px 8px 0 0 #060,
      2px 9px 0 0 #060, 3px 9px 0 0 #060, 4px 9px 0 0 #060, 5px 9px 0 0 #060, 6px 9px 0 0 #060, 7px 9px 0 0 #060, 8px 9px 0 0 #060;
  }

  /* Print options dialog */
  .print-picker-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .print-picker {
    width: 560px;
    max-width: calc(100vw - 32px);
    min-height: auto;
    position: relative;
  }

  .print-picker .title-bar {
    background: linear-gradient(90deg, #003300, #1a8a1a) !important;
  }

  .print-picker .window-body {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* Save picker dialog */
  .save-picker-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .save-picker {
    width: 380px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
    min-height: auto;
    position: relative;
    display: flex;
    flex-direction: column;
  }

  .save-picker .title-bar {
    background: linear-gradient(90deg, #003366, #1a6ab5) !important;
  }

  .save-picker .window-body {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* ── Embed Code section ── */
  .save-embed-section {
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
  }

  .save-embed-textarea {
    width: 100%;
    height: 140px;
    resize: vertical;
    font-family: Consolas, monospace;
    font-size: 11px;
    padding: 6px;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    background: #fff;
    color: #000;
    word-break: break-all;
    box-sizing: border-box;
  }

  .save-embed-copy-row {
    display: flex;
    justify-content: flex-end;
  }

  .save-embed-copy-btn {
    font-size: 12px;
    padding: 3px 14px;
    height: 24px;
  }

  /* ── State Save/Load Dialog ── */
  .state-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .state-dialog {
    width: 480px;
    max-width: calc(100vw - 32px);
    min-height: auto;
    position: relative;
  }

  .state-dialog .title-bar {
    background: linear-gradient(90deg, #333366, #6666aa) !important;
  }

  .state-dialog .window-body {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .state-dialog textarea {
    width: 100%;
    height: 120px;
    resize: vertical;
    font-family: Consolas, monospace;
    font-size: 11px;
    padding: 6px;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    background: #fff;
    color: #000;
    word-break: break-all;
  }

  .state-dialog-info {
    font-size: 11px;
    color: #666;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .state-dialog .button-row {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    margin-top: 4px;
  }

  .about-window {
    min-height: auto;
  }
  .about-window .window-body {
    padding: 6px 8px;
  }
  .about-content {
    padding: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }
  .about-content h3 {
    margin: 0 0 2px 0;
    font-size: 14px;
  }
  .about-content .about-version {
    font-size: 11px;
    color: #666;
    margin-bottom: 1px;
  }
  .about-content .about-copyright {
    font-size: 11px;
    margin-bottom: 4px;
  }
  .about-content hr {
    margin: 4px 0;
  }
  .about-license {
    max-height: 220px;
    overflow-y: auto;
    font-size: 10px;
    white-space: pre-wrap;
    font-family: monospace;
    background: #f5f5f5;
    border: 1px solid #ccc;
    padding: 6px;
    margin-top: 4px;
    margin-bottom: 0;
  }

  .save-picker .confirm-buttons {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
  }

  .save-filename-input {
    flex: 1;
    min-width: 0;
  }

  .print-body-layout {
    display: flex;
    gap: 16px;
    align-items: flex-start;
  }

  .print-controls {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .print-group {
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    padding: 10px 12px 8px;
    margin: 0;
  }

  .print-group legend {
    font-size: 12px;
    font-weight: bold;
    color: #000080;
    padding: 0 4px;
  }

  .print-field-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
  }

  .print-field-row:last-child {
    margin-bottom: 0;
  }

  .print-field-row > label {
    font-size: 13px;
    width: 85px;
    flex-shrink: 0;
    text-align: right;
  }

  .print-field-row input[type="number"] {
    font-family: inherit;
    font-size: 13px;
    padding: 2px 4px;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    background: #ffffff;
    outline: none;
    height: 26px;
    width: 60px;
    flex: 0 0 auto;
  }

  .print-field-row .settings-dropdown {
    flex: 1;
  }

  .print-field-row .settings-dropdown .dropdown-trigger {
    height: 24px;
    font-size: 13px;
    padding: 2px 26px 2px 6px;
  }

  .print-range-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
  }

  .print-range-row:last-child {
    margin-bottom: 0;
  }

  .print-range-row > label {
    font-size: 13px;
    width: 85px;
    flex-shrink: 0;
    text-align: right;
  }

  .print-range-row input[type="range"] {
    flex: 1;
    height: 18px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
  }

  .print-range-row input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    background: #ffffff;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    box-shadow: inset 1px 1px 0 #404040;
  }

  .print-range-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 11px;
    height: 18px;
    margin-top: -8px;
    background: #c0c0c0;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #404040;
  }

  .print-range-row input[type="range"]::-moz-range-track {
    height: 6px;
    background: #ffffff;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    box-shadow: inset 1px 1px 0 #404040;
  }

  .print-range-row input[type="range"]::-moz-range-thumb {
    width: 11px;
    height: 18px;
    background: #c0c0c0;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #404040;
    border-radius: 0;
  }

  .print-range-value {
    min-width: 30px;
    text-align: right;
    font-size: 13px;
    font-weight: bold;
  }

  .print-radio-group {
    display: flex;
    gap: 12px;
    font-size: 13px;
  }

  .print-radio-group label {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
  }

  .print-check-row {
    margin-bottom: 4px;
  }

  .print-check-row:last-child {
    margin-bottom: 0;
  }

  .print-check-row label {
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
  }

  .print-link-btn {
    width: 22px;
    height: 20px;
    font-size: 11px;
    padding: 0;
    border: 2px solid;
    border-color: #fff #808080 #808080 #fff;
    background: #ece9d8;
    cursor: pointer;
    flex-shrink: 0;
    line-height: 16px;
    text-align: center;
  }
  .print-link-spacer {
    width: 22px;
    flex-shrink: 0;
  }
  .print-link-btn.linked {
    border-color: #808080 #fff #fff #808080;
    background: #d4d0c8;
  }

  .print-label-note {
    font-size: 11px;
    color: #996600;
    padding: 2px 4px;
    font-style: italic;
  }

  .print-range-row input[type="range"]:disabled {
    opacity: 0.5;
    cursor: default;
  }

  .print-preview-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    width: 160px;
    flex-shrink: 0;
    padding: 8px;
    background: #d4d0c8;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
  }

  .print-preview-page {
    background: #ffffff;
    border: 1px solid #808080;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
    transition: width 0.15s, height 0.15s;
  }

  .print-preview-margin {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }

  .print-preview-grid {
    display: grid;
    width: 100%;
    height: 100%;
  }

  .print-preview-cell {
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: 0;
    min-width: 0;
  }

  .print-preview-cell svg {
    opacity: 0.8;
  }

  .print-custom-inputs {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
  }

  .print-custom-inputs input[type="number"] {
    width: 70px;
    flex: 1;
    font-family: inherit;
    font-size: 13px;
    padding: 2px 4px;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    background: #ffffff;
    outline: none;
    height: 26px;
  }

  .print-custom-x {
    font-size: 13px;
    color: #444;
    flex-shrink: 0;
  }

  .print-picker .confirm-buttons {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
  }

  .settings-action-row {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
  }

  .settings-window .resize-handle {
    display: none;
  }

  /* Settings window — always on top with red title bar */
  .settings-window {
    min-width: 260px;
    min-height: 0;
    max-height: calc(100vh - 20px);
  }

  .settings-window .title-bar,
  .settings-window.focused .title-bar {
    background: linear-gradient(90deg, #800000, #d03030) !important;
  }

  .settings-window:not(.focused) .title-bar {
    background: linear-gradient(90deg, #808080, #b0b0b0) !important;
  }

  .settings-window .window-body {
    padding: 6px 8px 8px;
    overflow-y: auto;
  }

  .settings-window label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 13px;
    margin-bottom: 6px;
  }

  .settings-window label:last-child {
    margin-bottom: 0;
  }

  .settings-window .xp-button {
    background: #cc0000;
    color: #ffffff;
    font-weight: bold;
    margin: 0 auto;
    justify-content: center;
  }

  .settings-window .xp-button.clear-data-btn {
    background: #e67e00;
    font-size: 14px;
    padding: 4px 10px;
  }

  .settings-toggle-row {
    display: flex;
    gap: 16px;
    margin-bottom: 6px;
  }
  .settings-toggle-row label {
    margin-bottom: 0;
  }

  .settings-field-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0;
  }

  .settings-field-row label {
    width: auto;
    white-space: nowrap;
    font-size: 13px;
    margin-bottom: 0;
    cursor: default;
  }

  .settings-field-row select {
    flex: 1;
    font-family: inherit;
    font-size: 13px;
    padding: 2px 4px;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    background: #ffffff;
    outline: none;
    height: 24px;
  }

  .settings-field-row .settings-dropdown {
    flex: 1;
  }

  .settings-field-row .settings-dropdown .dropdown-trigger {
    height: 24px;
    font-size: 13px;
    padding: 2px 26px 2px 6px;
  }

  /* Settings range rows */
  .settings-range-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0;
  }

  .settings-range-row label {
    width: auto;
    white-space: nowrap;
    font-size: 13px;
    margin-bottom: 0;
    cursor: default;
    min-width: 70px;
  }

  .settings-range-row input[type="range"] {
    flex: 1;
    height: 18px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    outline: none;
  }

  .settings-range-row input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    background: #ffffff;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    box-shadow: inset 1px 1px 0 #404040;
  }

  .settings-range-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 11px;
    height: 18px;
    margin-top: -8px;
    background: #c0c0c0;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #404040;
  }

  .settings-range-row input[type="range"]::-moz-range-track {
    height: 6px;
    background: #ffffff;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    box-shadow: inset 1px 1px 0 #404040;
  }

  .settings-range-row input[type="range"]::-moz-range-thumb {
    width: 11px;
    height: 18px;
    background: #c0c0c0;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #404040;
    border-radius: 0;
  }

  .settings-range-value {
    min-width: 22px;
    text-align: right;
    font-size: 13px;
    font-weight: bold;
  }

  .settings-group-label {
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    color: #808080;
    letter-spacing: 0.5px;
    margin: 8px 0 2px;
    padding-bottom: 2px;
    border-bottom: 1px solid #c0c0c0;
  }

  /* Settings tabs (Win95 style) */
  .settings-tabs {
    display: flex;
    justify-content: center;
    position: relative;
    margin-bottom: -2px;
    padding: 0 4px;
    z-index: 1;
  }

  .settings-tab {
    padding: 3px 10px;
    font-size: 12px;
    font-family: inherit;
    background: #c0c0c0;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    border-bottom: none;
    cursor: pointer;
    position: relative;
    top: 2px;
    margin-right: 2px;
    outline: none;
  }

  .settings-tab:hover {
    background: #d0d0d0;
  }

  .settings-tab.active {
    background: #c0c0c0;
    top: 0;
    padding-bottom: 5px;
    z-index: 2;
  }

  .settings-tab-content {
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    background: #c0c0c0;
    padding: 8px;
    position: relative;
  }

  .settings-tab-panel {
    display: none;
  }

  .settings-tab-panel.active {
    display: block;
    padding-top: 4px;
  }

  /* Settings content (no-tab layout) */
  .settings-content {
    /* No extra padding; .settings-window .window-body handles it */
  }

  .settings-content .settings-field-row {
    margin-top: 4px;
    margin-bottom: 4px;
  }

  .settings-content .settings-slider-row {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .settings-content .settings-slider-row label {
    font-size: 11px;
  }

  .settings-content .settings-slider-row input[type="range"] {
    width: 100%;
  }

  .settings-content .settings-action-row {
    margin-top: 6px;
  }

  .popup-close-btn {
    width: 18px;
    height: 16px;
    background: #c0c0c0;
    border: 1px solid;
    border-color: #ffffff #000000 #000000 #ffffff;
    box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #808080;
    font-size: 0;
    line-height: 0;
    cursor: pointer;
    padding: 0;
    position: relative;
    margin-left: auto;
    color: transparent;
    overflow: hidden;
  }

  .popup-close-btn:active {
    border-color: #000000 #ffffff #ffffff #000000;
    box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #dfdfdf;
  }

  .popup-close-btn::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow:
      3px 2px 0 0 #000,  4px 2px 0 0 #000,  9px 2px 0 0 #000, 10px 2px 0 0 #000,
      4px 3px 0 0 #000,  5px 3px 0 0 #000,  8px 3px 0 0 #000,  9px 3px 0 0 #000,
      5px 4px 0 0 #000,  6px 4px 0 0 #000,  7px 4px 0 0 #000,  8px 4px 0 0 #000,
      6px 5px 0 0 #000,  7px 5px 0 0 #000,
      5px 6px 0 0 #000,  6px 6px 0 0 #000,  7px 6px 0 0 #000,  8px 6px 0 0 #000,
      4px 7px 0 0 #000,  5px 7px 0 0 #000,  8px 7px 0 0 #000,  9px 7px 0 0 #000,
      3px 8px 0 0 #000,  4px 8px 0 0 #000,  9px 8px 0 0 #000, 10px 8px 0 0 #000;
  }

  /* Confirmation dialog overlay */
  .confirm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .confirm-dialog {
    width: 320px;
    min-height: 0;
    max-height: 90vh;
    position: relative;
  }

  .confirm-dialog .window-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .confirm-dialog .confirm-message {
    font-size: 14px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }

  .confirm-dialog .confirm-icon {
    font-size: 32px;
    line-height: 1;
    flex-shrink: 0;
  }

  .confirm-dialog .confirm-buttons {
    display: flex;
    justify-content: center;
    gap: 8px;
  }

  .confirm-dialog .confirm-dont-show {
    font-size: 12px;
    margin-top: -4px;
    display: flex;
    align-items: center;
  }

  .confirm-dialog .confirm-dont-show label {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    user-select: none;
  }

  /* Dark mode */
  /* Dark mode: menu bar */
  body.dark-mode #top-menubar {
    background: #2d2d3d;
    border-color: #4a4a5a #1a1a2a #1a1a2a #4a4a5a;
  }

  body.dark-mode .menubar-item:hover .menubar-label,
  body.dark-mode .menubar-item.active .menubar-label {
    background: #3a1a6a;
  }

  body.dark-mode .menubar-dropdown {
    background: #2d2d3d;
    border-color: #4a4a5a #1a1a2a #1a1a2a #4a4a5a;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.5);
  }

  body.dark-mode .menubar-action {
    color: #e0e0e0;
  }

  body.dark-mode .menubar-action:hover:not(.disabled) {
    background: #3a1a6a;
    color: #fff;
  }

  body.dark-mode .menubar-action.disabled {
    color: #666;
  }

  body.dark-mode .menubar-separator {
    background: #4a4a5a;
    border-bottom-color: #1a1a2a;
  }

  body.dark-mode .menubar-shortcut {
    color: #666;
  }

  body.dark-mode .menubar-action:hover:not(.disabled) .menubar-shortcut {
    color: #aaa;
  }

  body.dark-mode .menubar-soon {
    color: #666;
  }

  body.dark-mode .menubar-action:hover:not(.disabled) .menubar-soon {
    color: #aaa;
  }

  body.dark-mode .menubar-label {
    color: #e0e0e0;
  }

  body.dark-mode {
    background: #1a1a2e;
  }

  body.dark-mode .window {
    background: #2d2d3d;
    border-color: #4a4a5a #1a1a2a #1a1a2a #4a4a5a;
  }

  body.dark-mode .window.focused .title-bar {
    background: linear-gradient(90deg, #1a0040, #3a1a6a);
  }

  body.dark-mode .window:not(.focused) .title-bar {
    background: linear-gradient(90deg, #3a3a4a, #555565);
  }

  /* Dark mode: settings window red title bar */
  body.dark-mode .settings-window .title-bar,
  body.dark-mode .settings-window.focused .title-bar {
    background: linear-gradient(90deg, #4a0000, #8a2020) !important;
  }

  body.dark-mode .settings-window:not(.focused) .title-bar {
    background: linear-gradient(90deg, #3a3a4a, #555565) !important;
  }

  /* Dark mode: print picker green title bar */
  body.dark-mode .print-picker .title-bar {
    background: linear-gradient(90deg, #002200, #0d5a0d) !important;
  }

  /* Dark mode: save picker blue title bar */
  body.dark-mode .save-picker .title-bar {
    background: linear-gradient(90deg, #001a33, #0d4a7a) !important;
  }

  /* Dark mode: embed code section */
  body.dark-mode .save-embed-textarea {
    background: #1e1e2e;
    color: #e0e0e0;
    border-color: #555 #333 #333 #555;
  }

  /* Dark mode: state dialog */
  body.dark-mode .state-dialog .title-bar {
    background: linear-gradient(90deg, #1a1a40, #3a3a7a) !important;
  }

  body.dark-mode .state-dialog textarea {
    background: #1e1e2e;
    color: #e0e0e0;
    border-color: #555 #333 #333 #555;
  }

  body.dark-mode .state-dialog-info {
    color: #aaa;
  }

  body.dark-mode .state-dialog label {
    color: #e0e0e0;
  }

  body.dark-mode .about-license {
    background: #1e1e2e;
    color: #e0e0e0;
    border-color: #555 #333 #333 #555;
  }

  body.dark-mode .about-content .about-version {
    color: #aaa;
  }

  body.dark-mode .about-content .about-copyright {
    color: #e0e0e0;
  }

  body.dark-mode .about-content h3 {
    color: #e0e0e0;
  }

  body.dark-mode .title-bar-controls button {
    background: #3d3d4d;
    border-color: #5a5a6a #2a2a3a #2a2a3a #5a5a6a;
    box-shadow: inset 1px 1px 0 #555565, inset -1px -1px 0 #1a1a2a;
  }

  body.dark-mode .btn-minimize::after {
    background: #fff;
  }

  body.dark-mode .btn-maximize::after {
    border-color: #fff;
  }

  body.dark-mode .btn-close::after {
    box-shadow:
      3px 2px 0 0 #fff,  4px 2px 0 0 #fff,  9px 2px 0 0 #fff, 10px 2px 0 0 #fff,
      4px 3px 0 0 #fff,  5px 3px 0 0 #fff,  8px 3px 0 0 #fff,  9px 3px 0 0 #fff,
      5px 4px 0 0 #fff,  6px 4px 0 0 #fff,  7px 4px 0 0 #fff,  8px 4px 0 0 #fff,
      6px 5px 0 0 #fff,  7px 5px 0 0 #fff,
      5px 6px 0 0 #fff,  6px 6px 0 0 #fff,  7px 6px 0 0 #fff,  8px 6px 0 0 #fff,
      4px 7px 0 0 #fff,  5px 7px 0 0 #fff,  8px 7px 0 0 #fff,  9px 7px 0 0 #fff,
      3px 8px 0 0 #fff,  4px 8px 0 0 #fff,  9px 8px 0 0 #fff, 10px 8px 0 0 #fff;
  }

  body.dark-mode .btn-save::after {
    box-shadow:
      4px 1px 0 0 #59f, 5px 1px 0 0 #59f, 6px 1px 0 0 #59f, 7px 1px 0 0 #59f, 8px 1px 0 0 #59f, 9px 1px 0 0 #59f, 10px 1px 0 0 #59f,
      3px 2px 0 0 #59f, 4px 2px 0 0 #7bf, 5px 2px 0 0 #3a3a4a, 6px 2px 0 0 #3a3a4a, 7px 2px 0 0 #3a3a4a, 8px 2px 0 0 #3a3a4a, 9px 2px 0 0 #3a3a4a, 10px 2px 0 0 #7bf, 11px 2px 0 0 #59f,
      3px 3px 0 0 #59f, 4px 3px 0 0 #7bf, 5px 3px 0 0 #3a3a4a, 6px 3px 0 0 #3a3a4a, 7px 3px 0 0 #3a3a4a, 8px 3px 0 0 #3a3a4a, 9px 3px 0 0 #3a3a4a, 10px 3px 0 0 #7bf, 11px 3px 0 0 #59f,
      3px 4px 0 0 #59f, 4px 4px 0 0 #7bf, 5px 4px 0 0 #3a3a4a, 6px 4px 0 0 #3a3a4a, 7px 4px 0 0 #3a3a4a, 8px 4px 0 0 #3a3a4a, 9px 4px 0 0 #3a3a4a, 10px 4px 0 0 #7bf, 11px 4px 0 0 #59f,
      3px 5px 0 0 #59f, 4px 5px 0 0 #7bf, 5px 5px 0 0 #7bf, 6px 5px 0 0 #7bf, 7px 5px 0 0 #7bf, 8px 5px 0 0 #7bf, 9px 5px 0 0 #7bf, 10px 5px 0 0 #7bf, 11px 5px 0 0 #59f,
      3px 6px 0 0 #59f, 4px 6px 0 0 #7bf, 5px 6px 0 0 #7bf, 6px 6px 0 0 #7bf, 7px 6px 0 0 #7bf, 8px 6px 0 0 #7bf, 9px 6px 0 0 #7bf, 10px 6px 0 0 #7bf, 11px 6px 0 0 #59f,
      3px 7px 0 0 #59f, 4px 7px 0 0 #3a3a4a, 5px 7px 0 0 #3a3a4a, 6px 7px 0 0 #3a3a4a, 7px 7px 0 0 #3a3a4a, 8px 7px 0 0 #3a3a4a, 9px 7px 0 0 #3a3a4a, 10px 7px 0 0 #3a3a4a, 11px 7px 0 0 #59f,
      3px 8px 0 0 #59f, 4px 8px 0 0 #3a3a4a, 5px 8px 0 0 #59f, 6px 8px 0 0 #3a3a4a, 7px 8px 0 0 #59f, 8px 8px 0 0 #3a3a4a, 9px 8px 0 0 #59f, 10px 8px 0 0 #3a3a4a, 11px 8px 0 0 #59f,
      3px 9px 0 0 #59f, 4px 9px 0 0 #3a3a4a, 5px 9px 0 0 #59f, 6px 9px 0 0 #3a3a4a, 7px 9px 0 0 #59f, 8px 9px 0 0 #3a3a4a, 9px 9px 0 0 #3a3a4a, 10px 9px 0 0 #3a3a4a, 11px 9px 0 0 #59f,
      3px 10px 0 0 #59f, 4px 10px 0 0 #59f, 5px 10px 0 0 #59f, 6px 10px 0 0 #59f, 7px 10px 0 0 #59f, 8px 10px 0 0 #59f, 9px 10px 0 0 #59f, 10px 10px 0 0 #59f, 11px 10px 0 0 #59f;
  }
  body.dark-mode .btn-duplicate::before {
    border-color: #aa77ff;
  }
  body.dark-mode .btn-duplicate::after {
    border-color: #aa77ff;
    background: #3a3a4a;
  }
  body.dark-mode .btn-print::after {
    box-shadow:
      5px 1px 0 0 #5c5, 6px 1px 0 0 #5c5, 7px 1px 0 0 #5c5, 8px 1px 0 0 #5c5, 9px 1px 0 0 #5c5,
      5px 2px 0 0 #5c5, 6px 2px 0 0 #3a3a4a, 7px 2px 0 0 #3a3a4a, 8px 2px 0 0 #3a3a4a, 9px 2px 0 0 #5c5,
      5px 3px 0 0 #5c5, 6px 3px 0 0 #3a3a4a, 7px 3px 0 0 #3a3a4a, 8px 3px 0 0 #3a3a4a, 9px 3px 0 0 #5c5,
      3px 4px 0 0 #5c5, 4px 4px 0 0 #5c5, 5px 4px 0 0 #5c5, 6px 4px 0 0 #5c5, 7px 4px 0 0 #5c5, 8px 4px 0 0 #5c5, 9px 4px 0 0 #5c5, 10px 4px 0 0 #5c5, 11px 4px 0 0 #5c5,
      3px 5px 0 0 #5c5, 4px 5px 0 0 #3a5a3a, 5px 5px 0 0 #3a5a3a, 6px 5px 0 0 #3a5a3a, 7px 5px 0 0 #3a5a3a, 8px 5px 0 0 #3a5a3a, 9px 5px 0 0 #3a5a3a, 10px 5px 0 0 #3a5a3a, 11px 5px 0 0 #5c5,
      3px 6px 0 0 #5c5, 4px 6px 0 0 #3a5a3a, 5px 6px 0 0 #3a5a3a, 6px 6px 0 0 #3a5a3a, 7px 6px 0 0 #3a5a3a, 8px 6px 0 0 #3a5a3a, 9px 6px 0 0 #3a5a3a, 10px 6px 0 0 #0f0, 11px 6px 0 0 #5c5,
      3px 7px 0 0 #5c5, 4px 7px 0 0 #5c5, 5px 7px 0 0 #5c5, 6px 7px 0 0 #5c5, 7px 7px 0 0 #5c5, 8px 7px 0 0 #5c5, 9px 7px 0 0 #5c5, 10px 7px 0 0 #5c5, 11px 7px 0 0 #5c5,
      4px 8px 0 0 #5c5, 5px 8px 0 0 #3a3a4a, 6px 8px 0 0 #3a3a4a, 7px 8px 0 0 #3a3a4a, 8px 8px 0 0 #3a3a4a, 9px 8px 0 0 #3a3a4a, 10px 8px 0 0 #5c5,
      4px 9px 0 0 #5c5, 5px 9px 0 0 #3a3a4a, 6px 9px 0 0 #5c5, 7px 9px 0 0 #3a3a4a, 8px 9px 0 0 #5c5, 9px 9px 0 0 #3a3a4a, 10px 9px 0 0 #5c5,
      4px 10px 0 0 #5c5, 5px 10px 0 0 #5c5, 6px 10px 0 0 #5c5, 7px 10px 0 0 #5c5, 8px 10px 0 0 #5c5, 9px 10px 0 0 #5c5, 10px 10px 0 0 #5c5;
  }



  body.dark-mode .print-picker input[type="number"],
  body.dark-mode .print-custom-inputs input[type="number"],
  body.dark-mode .save-picker input[type="number"],
  body.dark-mode .save-picker input[type="text"] {
    background: #1e1e2e;
    color: #e0e0e0;
    border-color: #555 #333 #333 #555;
  }

  body.dark-mode .print-custom-x {
    color: #aaa;
  }

  body.dark-mode .print-range-row input[type="range"]::-webkit-slider-runnable-track {
    background: #1a1a2a;
    border-color: #5a5a6a #2a2a3a #2a2a3a #5a5a6a;
    box-shadow: inset 1px 1px 0 #111;
  }

  body.dark-mode .print-range-row input[type="range"]::-webkit-slider-thumb {
    background: #4a4a5a;
    border-color: #6a6a7a #2a2a3a #2a2a3a #6a6a7a;
    box-shadow: inset 1px 1px 0 #5a5a6a, inset -1px -1px 0 #1a1a2a;
  }

  body.dark-mode .print-range-row input[type="range"]::-moz-range-track {
    background: #1a1a2a;
    border-color: #5a5a6a #2a2a3a #2a2a3a #5a5a6a;
    box-shadow: inset 1px 1px 0 #111;
  }

  body.dark-mode .print-range-row input[type="range"]::-moz-range-thumb {
    background: #4a4a5a;
    border-color: #6a6a7a #2a2a3a #2a2a3a #6a6a7a;
    box-shadow: inset 1px 1px 0 #5a5a6a, inset -1px -1px 0 #1a1a2a;
  }

  body.dark-mode .print-range-value {
    color: #e0e0e0;
  }

  body.dark-mode .print-picker label,
  body.dark-mode .save-picker label,
  body.dark-mode .print-field-row > label,
  body.dark-mode .print-range-row > label,
  body.dark-mode .print-radio-group label,
  body.dark-mode .print-check-row label {
    color: #e0e0e0;
  }

  body.dark-mode .print-preview-wrap {
    background: #1a1a2a;
    border-color: #555 #333 #333 #555;
  }

  body.dark-mode .print-preview-page {
    background: #2a2a3a;
    border-color: #555;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
  }

  body.dark-mode .print-preview-cell {
    background: #3a3a4a;
  }

  body.dark-mode .print-preview-cell svg rect {
    fill: #888;
  }

  body.dark-mode .print-group {
    border-color: #555 #333 #333 #555;
  }

  body.dark-mode .print-group legend {
    color: #5b9bd5;
  }

  body.dark-mode .print-link-btn {
    border-color: #666 #333 #333 #666;
    background: #3d3d4d;
    color: #e0e0e0;
  }
  body.dark-mode .print-link-btn.linked {
    border-color: #333 #666 #666 #333;
    background: #2d2d3d;
  }

  body.dark-mode .print-label-note {
    color: #d4a030;
  }

  body.dark-mode .print-range-row input[type="range"]:disabled {
    opacity: 0.35;
  }

  body.dark-mode input[type="text"],
  body.dark-mode .settings-field-row select {
    background: #1e1e2e;
    color: #e0e0e0;
    border-color: #555 #333 #333 #555;
  }

  body.dark-mode .output-panel {
    background: #1e1e2e;
    border-color: #555 #333 #333 #555;
  }

  body.dark-mode .status-bar {
    background: #2d2d3d;
    color: #e0e0e0;
    border-color: #555 #333 #333 #555;
  }

  body.dark-mode .status-bar.error {
    color: #ff6666;
  }

  body.dark-mode .xp-button {
    background: #3d3d4d;
    color: #e0e0e0;
    border-color: #5a5a6a #2a2a3a #2a2a3a #5a5a6a;
  }

  body.dark-mode .settings-window .xp-button.clear-data-btn {
    background: #e67e00;
    color: #ffffff;
  }

  body.dark-mode .popout-btn {
    background: #3a3a4a;
    color: #e0e0e0;
  }

  body.dark-mode .save-btn {
    background: #3a3a4a;
    color: #e0e0e0;
  }

  body.dark-mode .settings-btn {
    background: #3a3a4a;
    color: #e0e0e0;
  }

  body.dark-mode .print-btn {
    background: #3a3a4a;
    color: #e0e0e0;
  }

  body.dark-mode .popout-btn::before {
    box-shadow:
      4px 0px 0 0 #59f, 5px 0px 0 0 #59f, 6px 0px 0 0 #59f, 7px 0px 0 0 #59f, 8px 0px 0 0 #59f, 9px 0px 0 0 #59f,
      4px 1px 0 0 #59f, 5px 1px 0 0 #9bf, 6px 1px 0 0 #9bf, 7px 1px 0 0 #9bf, 8px 1px 0 0 #9bf, 9px 1px 0 0 #59f,
      1px 2px 0 0 #59f, 2px 2px 0 0 #59f, 3px 2px 0 0 #59f, 4px 2px 0 0 #59f, 5px 2px 0 0 #59f, 6px 2px 0 0 #59f, 7px 2px 0 0 #cdf, 8px 2px 0 0 #cdf, 9px 2px 0 0 #59f,
      1px 3px 0 0 #59f, 2px 3px 0 0 #9bf, 3px 3px 0 0 #9bf, 4px 3px 0 0 #9bf, 5px 3px 0 0 #9bf, 6px 3px 0 0 #59f, 7px 3px 0 0 #cdf, 8px 3px 0 0 #cdf, 9px 3px 0 0 #59f,
      1px 4px 0 0 #59f, 2px 4px 0 0 #cdf, 3px 4px 0 0 #cdf, 4px 4px 0 0 #cdf, 5px 4px 0 0 #cdf, 6px 4px 0 0 #59f, 7px 4px 0 0 #59f, 8px 4px 0 0 #59f, 9px 4px 0 0 #59f,
      1px 5px 0 0 #59f, 2px 5px 0 0 #cdf, 3px 5px 0 0 #cdf, 4px 5px 0 0 #cdf, 5px 5px 0 0 #cdf, 6px 5px 0 0 #59f,
      1px 6px 0 0 #59f, 2px 6px 0 0 #cdf, 3px 6px 0 0 #cdf, 4px 6px 0 0 #cdf, 5px 6px 0 0 #cdf, 6px 6px 0 0 #59f,
      1px 7px 0 0 #59f, 2px 7px 0 0 #cdf, 3px 7px 0 0 #cdf, 4px 7px 0 0 #cdf, 5px 7px 0 0 #cdf, 6px 7px 0 0 #59f,
      1px 8px 0 0 #59f, 2px 8px 0 0 #59f, 3px 8px 0 0 #59f, 4px 8px 0 0 #59f, 5px 8px 0 0 #59f, 6px 8px 0 0 #59f;
  }

  body.dark-mode .save-btn::before {
    box-shadow:
      2px 0px 0 0 #59f, 3px 0px 0 0 #59f, 4px 0px 0 0 #59f, 5px 0px 0 0 #59f, 6px 0px 0 0 #59f, 7px 0px 0 0 #59f, 8px 0px 0 0 #59f,
      1px 1px 0 0 #59f, 2px 1px 0 0 #7bf, 3px 1px 0 0 #3a3a4a, 4px 1px 0 0 #3a3a4a, 5px 1px 0 0 #3a3a4a, 6px 1px 0 0 #3a3a4a, 7px 1px 0 0 #3a3a4a, 8px 1px 0 0 #7bf, 9px 1px 0 0 #59f,
      1px 2px 0 0 #59f, 2px 2px 0 0 #7bf, 3px 2px 0 0 #3a3a4a, 4px 2px 0 0 #3a3a4a, 5px 2px 0 0 #3a3a4a, 6px 2px 0 0 #3a3a4a, 7px 2px 0 0 #3a3a4a, 8px 2px 0 0 #7bf, 9px 2px 0 0 #59f,
      1px 3px 0 0 #59f, 2px 3px 0 0 #7bf, 3px 3px 0 0 #7bf, 4px 3px 0 0 #7bf, 5px 3px 0 0 #7bf, 6px 3px 0 0 #7bf, 7px 3px 0 0 #7bf, 8px 3px 0 0 #7bf, 9px 3px 0 0 #59f,
      1px 4px 0 0 #59f, 2px 4px 0 0 #7bf, 3px 4px 0 0 #7bf, 4px 4px 0 0 #7bf, 5px 4px 0 0 #7bf, 6px 4px 0 0 #7bf, 7px 4px 0 0 #7bf, 8px 4px 0 0 #7bf, 9px 4px 0 0 #59f,
      1px 5px 0 0 #59f, 2px 5px 0 0 #3a3a4a, 3px 5px 0 0 #3a3a4a, 4px 5px 0 0 #3a3a4a, 5px 5px 0 0 #3a3a4a, 6px 5px 0 0 #3a3a4a, 7px 5px 0 0 #3a3a4a, 8px 5px 0 0 #3a3a4a, 9px 5px 0 0 #59f,
      1px 6px 0 0 #59f, 2px 6px 0 0 #3a3a4a, 3px 6px 0 0 #59f, 4px 6px 0 0 #3a3a4a, 5px 6px 0 0 #59f, 6px 6px 0 0 #3a3a4a, 7px 6px 0 0 #59f, 8px 6px 0 0 #3a3a4a, 9px 6px 0 0 #59f,
      1px 7px 0 0 #59f, 2px 7px 0 0 #3a3a4a, 3px 7px 0 0 #59f, 4px 7px 0 0 #3a3a4a, 5px 7px 0 0 #59f, 6px 7px 0 0 #3a3a4a, 7px 7px 0 0 #3a3a4a, 8px 7px 0 0 #3a3a4a, 9px 7px 0 0 #59f,
      1px 8px 0 0 #59f, 2px 8px 0 0 #59f, 3px 8px 0 0 #59f, 4px 8px 0 0 #59f, 5px 8px 0 0 #59f, 6px 8px 0 0 #59f, 7px 8px 0 0 #59f, 8px 8px 0 0 #59f, 9px 8px 0 0 #59f;
  }

  body.dark-mode .settings-btn::before {
    box-shadow:
      3px 0px 0 0 #f66, 5px 0px 0 0 #f66, 7px 0px 0 0 #f66,
      3px 1px 0 0 #f66, 4px 1px 0 0 #f66, 5px 1px 0 0 #f66, 6px 1px 0 0 #f66, 7px 1px 0 0 #f66,
      1px 2px 0 0 #f66, 2px 2px 0 0 #f66, 3px 2px 0 0 #f66, 4px 2px 0 0 #fcc, 5px 2px 0 0 #fcc, 6px 2px 0 0 #fcc, 7px 2px 0 0 #f66, 8px 2px 0 0 #f66, 9px 2px 0 0 #f66,
      2px 3px 0 0 #f66, 3px 3px 0 0 #fcc, 4px 3px 0 0 #fcc, 6px 3px 0 0 #fcc, 7px 3px 0 0 #fcc, 8px 3px 0 0 #f66,
      1px 4px 0 0 #f66, 2px 4px 0 0 #f66, 3px 4px 0 0 #fcc, 7px 4px 0 0 #fcc, 8px 4px 0 0 #f66, 9px 4px 0 0 #f66,
      2px 5px 0 0 #f66, 3px 5px 0 0 #fcc, 4px 5px 0 0 #fcc, 6px 5px 0 0 #fcc, 7px 5px 0 0 #fcc, 8px 5px 0 0 #f66,
      1px 6px 0 0 #f66, 2px 6px 0 0 #f66, 3px 6px 0 0 #f66, 4px 6px 0 0 #fcc, 5px 6px 0 0 #fcc, 6px 6px 0 0 #fcc, 7px 6px 0 0 #f66, 8px 6px 0 0 #f66, 9px 6px 0 0 #f66,
      3px 7px 0 0 #f66, 4px 7px 0 0 #f66, 5px 7px 0 0 #f66, 6px 7px 0 0 #f66, 7px 7px 0 0 #f66,
      3px 8px 0 0 #f66, 5px 8px 0 0 #f66, 7px 8px 0 0 #f66;
  }

  body.dark-mode .print-btn::before {
    box-shadow:
      3px 0px 0 0 #5c5, 4px 0px 0 0 #5c5, 5px 0px 0 0 #5c5, 6px 0px 0 0 #5c5, 7px 0px 0 0 #5c5,
      3px 1px 0 0 #5c5, 4px 1px 0 0 #3a3a4a, 5px 1px 0 0 #3a3a4a, 6px 1px 0 0 #3a3a4a, 7px 1px 0 0 #5c5,
      3px 2px 0 0 #5c5, 4px 2px 0 0 #3a3a4a, 5px 2px 0 0 #3a3a4a, 6px 2px 0 0 #3a3a4a, 7px 2px 0 0 #5c5,
      1px 3px 0 0 #5c5, 2px 3px 0 0 #5c5, 3px 3px 0 0 #5c5, 4px 3px 0 0 #5c5, 5px 3px 0 0 #5c5, 6px 3px 0 0 #5c5, 7px 3px 0 0 #5c5, 8px 3px 0 0 #5c5, 9px 3px 0 0 #5c5,
      1px 4px 0 0 #5c5, 2px 4px 0 0 #3a5a3a, 3px 4px 0 0 #3a5a3a, 4px 4px 0 0 #3a5a3a, 5px 4px 0 0 #3a5a3a, 6px 4px 0 0 #3a5a3a, 7px 4px 0 0 #3a5a3a, 8px 4px 0 0 #3a5a3a, 9px 4px 0 0 #5c5,
      1px 5px 0 0 #5c5, 2px 5px 0 0 #3a5a3a, 3px 5px 0 0 #3a5a3a, 4px 5px 0 0 #3a5a3a, 5px 5px 0 0 #3a5a3a, 6px 5px 0 0 #3a5a3a, 7px 5px 0 0 #3a5a3a, 8px 5px 0 0 #0f0, 9px 5px 0 0 #5c5,
      1px 6px 0 0 #5c5, 2px 6px 0 0 #5c5, 3px 6px 0 0 #5c5, 4px 6px 0 0 #5c5, 5px 6px 0 0 #5c5, 6px 6px 0 0 #5c5, 7px 6px 0 0 #5c5, 8px 6px 0 0 #5c5, 9px 6px 0 0 #5c5,
      2px 7px 0 0 #5c5, 3px 7px 0 0 #3a3a4a, 4px 7px 0 0 #3a3a4a, 5px 7px 0 0 #3a3a4a, 6px 7px 0 0 #3a3a4a, 7px 7px 0 0 #3a3a4a, 8px 7px 0 0 #5c5,
      2px 8px 0 0 #5c5, 3px 8px 0 0 #3a3a4a, 4px 8px 0 0 #5c5, 5px 8px 0 0 #3a3a4a, 6px 8px 0 0 #5c5, 7px 8px 0 0 #3a3a4a, 8px 8px 0 0 #5c5,
      2px 9px 0 0 #5c5, 3px 9px 0 0 #5c5, 4px 9px 0 0 #5c5, 5px 9px 0 0 #5c5, 6px 9px 0 0 #5c5, 7px 9px 0 0 #5c5, 8px 9px 0 0 #5c5;
  }

  body.dark-mode .settings-window .xp-button {
    background: #3a3a4a;
    color: #ffffff;
  }

  body.dark-mode .dropdown-trigger {
    background: #1e1e2e;
    color: #e0e0e0;
    border-color: #555 #333 #333 #555;
  }

  body.dark-mode .dropdown-arrow {
    background: #3d3d4d;
    border-color: #5a5a6a #2a2a3a #2a2a3a #5a5a6a;
  }

  body.dark-mode .dropdown-options {
    background: #1e1e2e;
    border-color: #555 #333 #333 #555;
  }

  body.dark-mode .dropdown-option {
    color: #e0e0e0;
  }

  body.dark-mode .dropdown-option:hover,
  body.dark-mode .dropdown-option.selected {
    background: #3a3a6a;
    color: #ffffff;
  }

  body.dark-mode .type-popup {
    background: #2d2d3d;
    border-color: #4a4a5a #1a1a2a #1a1a2a #4a4a5a;
  }

  body.dark-mode .popup-title-bar {
    background: linear-gradient(90deg, #1a0040, #3a1a6a);
  }

  body.dark-mode .popup-list {
    background: #1e1e2e;
    border-color: #555 #333 #333 #555;
  }

  body.dark-mode .popup-section-header {
    background: #3d3d4d;
    color: #e0e0e0;
    border-bottom-color: #555;
  }

  body.dark-mode .popup-item {
    color: #e0e0e0;
  }

  body.dark-mode .popup-item:hover,
  body.dark-mode .popup-item.hovered {
    background: #3a1a6a;
  }

  body.dark-mode .popup-description {
    background: #3d3d4d;
    color: #e0e0e0;
    border-color: #555 #333 #333 #555;
  }

  body.dark-mode .settings-window label,
  body.dark-mode .field-row label,
  body.dark-mode .radio-group label {
    color: #e0e0e0;
  }

  body.dark-mode .settings-range-row input[type="range"]::-webkit-slider-runnable-track {
    background: #1a1a2a;
    border-color: #5a5a6a #2a2a3a #2a2a3a #5a5a6a;
    box-shadow: inset 1px 1px 0 #111;
  }

  body.dark-mode .settings-range-row input[type="range"]::-webkit-slider-thumb {
    background: #4a4a5a;
    border-color: #6a6a7a #2a2a3a #2a2a3a #6a6a7a;
    box-shadow: inset 1px 1px 0 #5a5a6a, inset -1px -1px 0 #1a1a2a;
  }

  body.dark-mode .settings-range-row input[type="range"]::-moz-range-track {
    background: #1a1a2a;
    border-color: #5a5a6a #2a2a3a #2a2a3a #5a5a6a;
    box-shadow: inset 1px 1px 0 #111;
  }

  body.dark-mode .settings-range-row input[type="range"]::-moz-range-thumb {
    background: #4a4a5a;
    border-color: #6a6a7a #2a2a3a #2a2a3a #6a6a7a;
    box-shadow: inset 1px 1px 0 #5a5a6a, inset -1px -1px 0 #1a1a2a;
  }

  body.dark-mode .settings-range-value {
    color: #e0e0e0;
  }

  body.dark-mode .settings-group-label {
    color: #a0a0b0;
    border-bottom-color: #4a4a5a;
  }

  body.dark-mode .settings-tab {
    background: #3d3d4d;
    border-color: #5a5a6a #2a2a3a #2a2a3a #5a5a6a;
    border-bottom: none;
    color: #e0e0e0;
  }

  body.dark-mode .settings-tab:hover {
    background: #4a4a5a;
  }

  body.dark-mode .settings-tab.active {
    background: #2d2d3d;
  }

  body.dark-mode .settings-tab-content {
    background: #2d2d3d;
    border-color: #5a5a6a #2a2a3a #2a2a3a #5a5a6a;
  }

  body.dark-mode .settings-content {
    color: #e0e0e0;
  }

  body.dark-mode .settings-content label {
    color: #e0e0e0;
  }

  body.dark-mode .placeholder {
    color: #666;
  }

  body.dark-mode .confirm-overlay {
    background: rgba(0, 0, 0, 0.5);
  }

  body.dark-mode .confirm-message {
    color: #e0e0e0;
  }

  body.dark-mode .confirm-dont-show label {
    color: #e0e0e0;
  }

  body.dark-mode .popup-close-btn {
    background: #3d3d4d;
    border-color: #5a5a6a #2a2a3a #2a2a3a #5a5a6a;
    box-shadow: inset 1px 1px 0 #555565, inset -1px -1px 0 #1a1a2a;
  }

  body.dark-mode .popup-title-icon {
    background: #3d3d4d;
    border-color: #555;
  }

  body.dark-mode #dock-preview {
    background: rgba(100, 100, 200, 0.15);
    border-color: rgba(100, 100, 200, 0.4);
  }
  body.dark-mode .snap-guide-h {
    border-top-color: rgba(100, 100, 200, 0.6);
  }
  body.dark-mode .snap-guide-v {
    border-left-color: rgba(100, 100, 200, 0.6);
  }

  body.dark-mode .settings-tab:not(.active):hover {
    background: #3a3a4a;
  }

  body.dark-mode .placeholder { color: #888; }

  /* Dock preview overlay */
  #dock-preview {
    position: fixed;
    background: rgba(0, 0, 128, 0.15);
    border: 2px solid rgba(0, 0, 128, 0.4);
    z-index: 9999;
    pointer-events: none;
    transition: left 0.1s, top 0.1s, width 0.1s, height 0.1s, opacity 0.1s;
    opacity: 0;
  }

  /* Snap guide lines */
  #snap-guides {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9998;
  }
  .snap-guide-h {
    position: absolute;
    left: 0;
    width: 100%;
    height: 0;
    border-top: 1px dashed rgba(0, 0, 128, 0.5);
  }
  .snap-guide-v {
    position: absolute;
    top: 0;
    height: 100%;
    width: 0;
    border-left: 1px dashed rgba(0, 0, 128, 0.5);
  }

  /* ── Mobile responsive ── */
  @media (max-width: 768px) {
    #top-menubar {
      height: 36px;
      font-size: 14px;
    }

    .menubar-label {
      padding: 4px 12px;
      line-height: 28px;
    }

    .menubar-action {
      padding: 8px 24px 8px 28px;
      font-size: 14px;
    }

    .menubar-dropdown {
      min-width: 220px;
    }

    .window.maximized {
      top: 38px !important;
      height: calc(100vh - 38px) !important;
    }

    body {
      overflow: auto;
      overflow-x: hidden;
      padding-top: 38px;
    }

    .window:not(.confirm-dialog):not(.settings-window):not(.print-picker):not(.save-picker):not(.color-picker-window):not(.state-dialog):not(.edit-popup-window):not(.about-window) {
      width: 100vw !important;
      height: auto !important;
      min-height: 100vh;
      left: 0 !important;
      top: 0 !important;
      position: relative;
      border: none;
      min-width: 0;
    }

    .window.minimized {
      min-height: 0;
      width: 100vw !important;
    }

    .window.maximized {
      min-height: 100vh;
    }

    .resize-handle {
      display: none !important;
    }

    #dock-preview,
    #snap-guides {
      display: none;
    }

    .title-bar {
      padding: 8px 6px;
      font-size: 14px;
    }

    .title-bar-controls button {
      width: 32px;
      height: 28px;
    }

    /* Scale the pixel-art icons inside the larger buttons */
    .btn-minimize::after {
      bottom: 6px;
      left: 8px;
      width: 10px;
      height: 3px;
    }

    .btn-maximize::after {
      top: 5px;
      left: 7px;
      width: 14px;
      height: 14px;
    }

    /* Center pixel-art icons in the larger mobile title-bar buttons (32x28) */
    .btn-close::after {
      top: 9px;
      left: 9px;
    }

    .btn-print::after {
      top: 8px;
      left: 9px;
    }

    .btn-save::after {
      top: 8px;
      left: 9px;
    }

    .btn-edit::after {
      top: 6px;
      left: 5px;
    }

    .btn-duplicate::before {
      top: 9px;
      left: 11px;
    }

    .btn-duplicate::after {
      top: 12px;
      left: 14px;
    }

    /* Ensure icon-text gap in main action buttons */
    .popout-btn,
    .edit-btn,
    .save-btn,
    .print-btn,
    .settings-btn {
      padding-left: 26px !important;
    }

    /* Fix icon centering for taller mobile buttons (36px) */
    .popout-btn::before,
    .edit-btn::before,
    .save-btn::before,
    .settings-btn::before {
      top: 14px;
      margin-top: 0;
    }

    .print-btn::before {
      top: 13px;
      margin-top: 0;
    }

    .window-body {
      padding: 12px;
      overflow-y: auto;
      min-height: 0;
    }

    .field-row {
      flex-direction: column;
      align-items: stretch;
      margin-bottom: 12px;
    }

    .field-row label {
      width: auto;
      text-align: left;
      margin-right: 0;
      margin-bottom: 4px;
    }

    .format-row {
      flex-direction: row;
      align-items: center;
      flex-wrap: nowrap;
    }

    .format-row label {
      width: auto;
      text-align: left;
      margin-bottom: 0;
      flex-shrink: 0;
    }

    .format-row .radio-group {
      flex: 1;
      min-width: 0;
    }

    .format-row .edit-btn {
      flex-shrink: 0;
    }

    input[type="text"] {
      font-size: 16px;
      height: 40px;
      padding: 6px 10px;
    }

    .radio-group {
      gap: 16px;
    }

    .radio-group label {
      font-size: 15px;
      gap: 8px;
    }

    input[type="radio"] {
      width: 20px;
      height: 20px;
    }

    .custom-dropdown {
      width: 100%;
    }

    .dropdown-trigger {
      height: 40px;
      font-size: 15px;
      padding: 6px 36px 6px 10px;
    }

    .dropdown-arrow {
      width: 30px;
    }

    .type-popup {
      width: calc(100vw - 24px);
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      margin-top: 0;
      max-height: 80vh;
      display: none;
      z-index: 2000;
    }

    .type-popup.open {
      display: flex;
      flex-direction: column;
    }

    .popup-body {
      overflow: hidden;
      display: flex;
      flex-direction: column;
      flex: 1;
      min-height: 0;
    }

    .popup-list {
      max-height: 50vh;
      -webkit-overflow-scrolling: touch;
    }

    .popup-item {
      padding: 10px 12px 10px 16px;
      font-size: 15px;
    }

    .popup-section-header {
      padding: 6px 12px;
      font-size: 15px;
    }

    .popup-description {
      font-size: 14px;
      min-height: 44px;
      padding: 6px 10px;
    }

    .output-panel {
      min-height: 160px;
      padding: 12px;
    }

    .output-panel.multi-barcode img {
      max-width: 100%;
    }

    .button-row {
      flex-wrap: wrap;
    }

    .xp-button {
      height: 36px;
      font-size: 15px;
      padding: 6px 14px;
    }

    .settings-window {
      width: calc(100vw - 32px) !important;
      max-width: 320px;
      max-height: calc(100vh - 32px);
      position: fixed !important;
      left: 50% !important;
      top: 50% !important;
      transform: translate(-50%, -50%);
      z-index: 9999 !important;
      min-width: 0;
      min-height: 0;
    }

    .about-window {
      width: calc(100vw - 32px) !important;
      max-width: 360px;
      max-height: calc(100vh - 32px);
      position: fixed !important;
      left: 50% !important;
      top: 50% !important;
      transform: translate(-50%, -50%);
      z-index: 9999 !important;
      min-width: 0;
      min-height: 0;
      overflow-y: auto;
    }

    .edit-popup-window {
      width: calc(100vw - 32px) !important;
      max-width: 380px;
      max-height: calc(100vh - 80px);
      position: fixed !important;
      left: 50% !important;
      top: 50% !important;
      transform: translate(-50%, -50%);
      min-width: 0;
      min-height: 0;
    }

    .settings-tab {
      font-size: 14px;
      padding: 5px 12px;
    }

    .settings-tab-content {
      padding: 12px;
    }

    .settings-window label {
      font-size: 15px;
      margin-bottom: 10px;
      min-height: 36px;
    }

    .settings-window input[type="checkbox"] {
      width: 20px;
      height: 20px;
    }

    .settings-field-row label {
      font-size: 15px;
    }

    .settings-field-row select {
      font-size: 15px;
      height: 32px;
      padding: 4px 6px;
    }

    .settings-dropdown .dropdown-trigger {
      height: 32px;
      font-size: 14px;
    }

    .dropdown-option {
      padding: 6px 10px;
      font-size: 15px;
    }

    .status-bar {
      font-size: 13px;
      padding: 6px 10px;
    }

    /* Popout windows on mobile */
    .popout-window {
      width: 100vw !important;
      height: auto !important;
      left: 0 !important;
      top: 0 !important;
      position: relative;
      min-width: 0;
      border: none;
      border-bottom: 2px solid #808080;
      min-height: 0 !important;
    }

    .popout-window .window-body {
      padding: 8px 12px;
    }

    .popout-window .output-panel {
      min-height: 120px;
    }

    /* Confirm dialog on mobile */
    .confirm-dialog {
      width: calc(100vw - 32px);
      max-width: 320px;
      min-height: 0;
      max-height: 90vh;
    }

    .confirm-dialog .xp-button {
      min-width: 80px;
    }

    /* Print picker on mobile */
    .print-picker {
      width: calc(100vw - 32px);
      max-width: 380px;
    }

    /* Save picker on mobile */
    .save-picker {
      width: calc(100vw - 32px);
      max-width: 500px;
    }

    /* Save HTML section on mobile — stack vertically */
    .save-html-section {
      flex-direction: column !important;
    }

    .save-html-section .print-group {
      flex: 1 !important;
      min-width: auto !important;
    }

    .print-body-layout {
      flex-direction: column;
    }

    .print-preview-wrap {
      width: 100%;
      height: 140px;
      align-self: auto;
    }

    .print-field-row > label,
    .print-range-row > label {
      width: 75px;
      font-size: 12px;
    }

    .print-field-row input[type="number"] {
      font-size: 14px;
      height: 32px;
    }

    .print-field-row .settings-dropdown .dropdown-trigger {
      height: 28px;
      font-size: 13px;
    }

    .print-radio-group {
      font-size: 12px;
      gap: 8px;
    }

    .print-check-row label {
      font-size: 14px;
      min-height: 32px;
    }

    /* Popup close button larger on mobile */
    .popup-close-btn {
      width: 28px;
      height: 24px;
      min-width: 36px;
      min-height: 32px;
    }

    .popup-close-btn::after {
      transform: scale(1.3);
      transform-origin: top left;
      top: 3px;
      left: 4px;
    }
  }

  /* Mobile popup overlay backdrop */
  .mobile-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1999;
  }

  /* =========================================================================
     Edit Panel
     ========================================================================= */

  /* Edit panel tabs (Win95 style — mirrors .settings-tab) */
  .edit-tabs {
    display: flex;
    justify-content: center;
    position: relative;
    margin-bottom: -2px;
    padding: 4px 4px 0;
    z-index: 1;
    background: #c0c0c0;
  }

  .edit-tab {
    padding: 3px 10px;
    font-size: 11px;
    font-family: inherit;
    background: #c0c0c0;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    border-bottom: none;
    cursor: pointer;
    position: relative;
    top: 2px;
    margin-right: 2px;
    outline: none;
  }

  .edit-tab:hover {
    background: #d0d0d0;
  }

  .edit-tab.active {
    background: #c0c0c0;
    top: 0;
    padding-bottom: 5px;
    z-index: 2;
  }

  .edit-tab-content {
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    background: #c0c0c0;
    padding: 6px 6px;
    position: relative;
    margin: 0 4px 4px;
    display: grid;
    overflow: hidden;
  }

  .edit-tab-panel {
    grid-row: 1;
    grid-column: 1;
    visibility: hidden;
  }

  .edit-tab-panel.active {
    visibility: visible;
  }

  .edit-type-display {
    font-size: 11px;
    font-weight: bold;
  }

  .edit-color-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
  }

  .edit-color-row label {
    min-width: 70px;
    font-size: 11px;
  }

  .color-swatch {
    width: 28px;
    height: 18px;
    padding: 2px;
    border: 1px solid #808080;
    border-top-color: #404040;
    border-left-color: #404040;
    background: #fff;
    cursor: pointer;
  }

  .color-swatch:hover {
    border-color: #0078d7;
  }

  .swatch-preview {
    display: block;
    width: 100%;
    height: 100%;
    background: #000;
  }

  .color-reset {
    width: 20px;
    height: 18px;
    padding: 0;
    border: 1px solid #808080;
    background: #ece9d8;
    cursor: pointer;
    font-size: 12px;
    line-height: 16px;
    color: #333;
  }

  .color-reset:hover {
    background: #d6d2c2;
  }

  .color-reset.color-active {
    background: #fff0c0;
    border-color: #d4a020;
    color: #b07800;
  }

  .color-reset.color-active:hover {
    background: #ffe8a0;
  }

  .edit-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 3px;
  }

  .edit-row label {
    font-size: 11px;
  }

  .edit-row > label:first-child {
    width: 70px;
    flex-shrink: 0;
  }

  .edit-row input[type="range"] {
    flex: 1;
    min-width: 0;
    height: 18px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    outline: none;
  }

  .edit-row input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    background: #ffffff;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    box-shadow: inset 1px 1px 0 #404040;
  }

  .edit-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 11px;
    height: 18px;
    margin-top: -8px;
    background: #c0c0c0;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #404040;
  }

  .edit-row input[type="range"]::-moz-range-track {
    height: 6px;
    background: #ffffff;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    box-shadow: inset 1px 1px 0 #404040;
  }

  .edit-row input[type="range"]::-moz-range-thumb {
    width: 11px;
    height: 18px;
    background: #c0c0c0;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #404040;
    border-radius: 0;
  }

  .edit-range-value {
    min-width: 18px;
    font-size: 11px;
    text-align: right;
    flex-shrink: 0;
  }

  /* Selection toolbar (edit panel) */
  .edit-selection-toolbar {
    padding: 4px 8px 2px;
    display: flex;
    gap: 4px;
    justify-content: flex-end;
  }

  .edit-selection-toolbar .xp-button {
    font-size: 11px;
    padding: 1px 6px;
    height: 20px;
  }

  .edit-selection-toolbar .xp-button.active {
    border-color: #0080ff #0080ff #0080ff #0080ff;
    box-shadow: 0 0 6px rgba(0, 128, 255, 0.8), inset 0 0 2px rgba(0, 128, 255, 0.3);
    background: linear-gradient(to bottom, #e6f2ff, #cce6ff);
    font-weight: bold;
  }

  /* Edit panel inline dropdown */
  .edit-dropdown .dropdown-trigger {
    height: 22px;
    font-size: 11px;
    min-width: 0;
    padding: 0 4px;
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    box-shadow: inset 1px 1px 0 #404040;
    cursor: pointer;
    user-select: none;
    flex: 1;
  }

  .edit-dropdown .dropdown-trigger:hover {
    background: #f0f0f0;
  }

  .edit-dropdown .dropdown-text {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 11px;
  }

  .edit-dropdown .dropdown-arrow {
    font-size: 8px;
    width: 16px;
    color: #333;
  }

  .edit-row .edit-dropdown {
    flex: 1;
  }

  .edit-checkbox-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .edit-checkbox-group label {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 11px;
    cursor: pointer;
  }

  /* Dark mode — edit-selection-toolbar */
  .dark-mode .edit-selection-toolbar {
    color: #ccc;
  }

  .dark-mode .edit-selection-toolbar .xp-button {
    color: #ccc;
  }

  .dark-mode .edit-selection-toolbar .xp-button.active {
    background: linear-gradient(to bottom, #1a4d99, #0d3366);
    color: #fff;
    border-color: #0080ff #0080ff #0080ff #0080ff;
    box-shadow: 0 0 6px rgba(0, 128, 255, 0.8), inset 0 0 2px rgba(0, 128, 255, 0.3);
    font-weight: bold;
  }

  /* Mixed-value controls in multi-window selection */
  .mixed-value {
    opacity: 0.6;
  }

  /* Mixed-color swatch shows diagonal stripe pattern */
  .mixed-color {
    background: repeating-linear-gradient(
      45deg,
      #888 0px,
      #888 4px,
      #ccc 4px,
      #ccc 8px
    ) !important;
  }

  body.dark-mode .mixed-color {
    background: repeating-linear-gradient(
      45deg,
      #555 0px,
      #555 4px,
      #777 4px,
      #777 8px
    ) !important;
  }

  /* Dark mode — edit-dropdown */
  .dark-mode .edit-dropdown .dropdown-trigger {
    background: #2a2a3a;
    border-color: #5a5a6a #2a2a3a #2a2a3a #5a5a6a;
    color: #e0e0e0;
  }

  .dark-mode .edit-dropdown .dropdown-text {
    color: #e0e0e0;
  }

  .dark-mode .edit-tabs {
    background: #2d2d3d;
  }

  .dark-mode .edit-tab {
    background: #3d3d4d;
    border-color: #5a5a6a #2a2a3a #2a2a3a #5a5a6a;
    border-bottom: none;
    color: #e0e0e0;
  }

  .dark-mode .edit-tab:hover {
    background: #4a4a5a;
  }

  .dark-mode .edit-tab.active {
    background: #2d2d3d;
  }

  .dark-mode .edit-tab-content {
    background: #2d2d3d;
    border-color: #5a5a6a #2a2a3a #2a2a3a #5a5a6a;
  }

  .dark-mode .edit-color-row label,
  .dark-mode .edit-row label {
    color: #ccc;
  }

  .dark-mode .edit-barcode-input {
    background: #3a3a3a;
    color: #e0e0e0;
    border-color: #555 #222 #222 #555;
  }

  .dark-mode .color-swatch {
    border-color: #555;
    background: #333;
  }

  .dark-mode .color-reset {
    border-color: #555;
    background: #2d2d3d;
    color: #ccc;
  }

  .dark-mode .color-reset.color-active {
    background: #3d3520;
    border-color: #a08030;
    color: #e0c060;
  }

  .dark-mode .color-reset.color-active:hover {
    background: #4a4025;
  }

  .dark-mode .edit-field-row label,
  .dark-mode .edit-format-row label {
    color: #ccc;
  }

  .dark-mode .png-scale-inline input[type="range"]::-webkit-slider-runnable-track {
    background: #1a1a2a;
    border-color: #555 #333 #333 #555;
  }

  .dark-mode .png-scale-inline input[type="range"]::-moz-range-track {
    background: #1a1a2a;
    border-color: #555 #333 #333 #555;
  }

  .dark-mode .png-scale-value {
    color: #e0e0e0;
  }

  .dark-mode .edit-type-display {
    color: #e0e0e0;
  }

  .dark-mode .edit-range-value {
    color: #ccc;
  }

  .dark-mode .edit-row input[type="range"]::-webkit-slider-runnable-track {
    background: #1a1a2a;
    border-color: #5a5a6a #2a2a3a #2a2a3a #5a5a6a;
    box-shadow: inset 1px 1px 0 #111;
  }

  .dark-mode .edit-row input[type="range"]::-webkit-slider-thumb {
    background: #4a4a5a;
    border-color: #6a6a7a #2a2a3a #2a2a3a #6a6a7a;
    box-shadow: inset 1px 1px 0 #5a5a6a, inset -1px -1px 0 #1a1a2a;
  }

  .dark-mode .edit-row input[type="range"]::-moz-range-track {
    background: #1a1a2a;
    border-color: #5a5a6a #2a2a3a #2a2a3a #5a5a6a;
    box-shadow: inset 1px 1px 0 #111;
  }

  .dark-mode .edit-row input[type="range"]::-moz-range-thumb {
    background: #4a4a5a;
    border-color: #6a6a7a #2a2a3a #2a2a3a #6a6a7a;
    box-shadow: inset 1px 1px 0 #5a5a6a, inset -1px -1px 0 #1a1a2a;
  }

  /* =========================================================================
     Floating Edit Popup
     ========================================================================= */

  /* Semi-transparent overlay dims everything behind the edit popup */
  .edit-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(80, 80, 80, 0.4);
    z-index: 103;
  }

  /* Blue glowing title bar for windows selected in edit mode */
  .window.edit-selected .title-bar {
    background: linear-gradient(90deg, #0050a0, #1a7fcc) !important;
    box-shadow: 0 0 0 2px #4db3ff, 0 0 8px rgba(77, 179, 255, 0.6) !important;
  }

  /* The floating edit popup window */
  .edit-popup-window {
    position: fixed;
    z-index: 120;
    width: 340px;
    min-width: 340px;
    min-height: 0 !important;
    height: auto !important;
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
  }

  .edit-popup-window > .window-body {
    overflow-y: auto;
    overflow-x: hidden;
    flex: 0 1 auto !important;
    min-height: 0;
    padding: 0 4px;
  }

  .edit-popup-window .edit-tabs {
    position: sticky;
    top: 0;
  }

  .edit-popup-window .edit-tab-content {
    margin-top: 0;
  }

  .edit-popup-window .edit-selection-toolbar {
    position: sticky;
    top: 0;
    z-index: 3;
  }

  /* Section headers inside the appearance panel */
  .edit-section-header {
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #555;
    padding: 5px 6px 2px;
    border-bottom: 1px solid #a0a0a0;
    margin-bottom: 3px;
  }

  .dark-mode .edit-section-header {
    color: #999;
    border-color: #555;
  }

  /* Pencil icon button in popout title bars */
  .btn-edit::after {
    content: '';
    position: absolute;
    top: 1px !important;
    left: 1px !important;
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow:
      /* pencil tip */
      3px 10px 0 0 #c60, 4px 10px 0 0 #c60,
      4px 9px 0 0 #c60, 5px 9px 0 0 #c60,
      /* pencil body */
      5px 8px 0 0 #f80, 6px 8px 0 0 #f80,
      6px 7px 0 0 #f80, 7px 7px 0 0 #f80,
      7px 6px 0 0 #f80, 8px 6px 0 0 #f80,
      8px 5px 0 0 #f80, 9px 5px 0 0 #f80,
      /* eraser */
      9px 4px 0 0 #fcc, 10px 4px 0 0 #fcc,
      10px 3px 0 0 #fcc, 11px 3px 0 0 #fcc,
      11px 2px 0 0 #c60, 12px 2px 0 0 #c60;
  }

  body.dark-mode .btn-edit::after {
    box-shadow:
      3px 10px 0 0 #fa0, 4px 10px 0 0 #fa0,
      4px 9px 0 0 #fa0, 5px 9px 0 0 #fa0,
      5px 8px 0 0 #fc0, 6px 8px 0 0 #fc0,
      6px 7px 0 0 #fc0, 7px 7px 0 0 #fc0,
      7px 6px 0 0 #fc0, 8px 6px 0 0 #fc0,
      8px 5px 0 0 #fc0, 9px 5px 0 0 #fc0,
      9px 4px 0 0 #ffe0c0, 10px 4px 0 0 #ffe0c0,
      10px 3px 0 0 #ffe0c0, 11px 3px 0 0 #ffe0c0,
      11px 2px 0 0 #fa0, 12px 2px 0 0 #fa0;
  }

  /* Spacing for edit button in title bar controls */
  .title-bar-controls .btn-edit {
    margin-right: 2px;
  }

  /* Edit button in main window button row */
  .edit-btn {
    background: #c0c0c0;
    color: #000;
    font-weight: bold;
    position: relative;
    padding-left: 22px;
  }

  .edit-btn::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 50%;
    margin-top: -5px;
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow:
      1px 8px 0 0 #c60, 2px 8px 0 0 #c60,
      2px 7px 0 0 #c60, 3px 7px 0 0 #c60,
      3px 6px 0 0 #f80, 4px 6px 0 0 #f80,
      4px 5px 0 0 #f80, 5px 5px 0 0 #f80,
      5px 4px 0 0 #f80, 6px 4px 0 0 #f80,
      6px 3px 0 0 #f80, 7px 3px 0 0 #f80,
      7px 2px 0 0 #fcc, 8px 2px 0 0 #fcc,
      8px 1px 0 0 #fcc, 9px 1px 0 0 #fcc,
      9px 0px 0 0 #c60, 10px 0px 0 0 #c60;
  }

  body.dark-mode .edit-btn {
    background: #3a3a4a;
    color: #e0e0e0;
  }

  body.dark-mode .edit-btn::before {
    box-shadow:
      1px 8px 0 0 #fa0, 2px 8px 0 0 #fa0,
      2px 7px 0 0 #fa0, 3px 7px 0 0 #fa0,
      3px 6px 0 0 #fc0, 4px 6px 0 0 #fc0,
      4px 5px 0 0 #fc0, 5px 5px 0 0 #fc0,
      5px 4px 0 0 #fc0, 6px 4px 0 0 #fc0,
      6px 3px 0 0 #fc0, 7px 3px 0 0 #fc0,
      7px 2px 0 0 #ffe0c0, 8px 2px 0 0 #ffe0c0,
      8px 1px 0 0 #ffe0c0, 9px 1px 0 0 #ffe0c0,
      9px 0px 0 0 #fa0, 10px 0px 0 0 #fa0;
  }

  /* =========================================================================
     Windows XP Color Picker Dialog
     ========================================================================= */

  /* Fullscreen dimming overlay — higher z-index than other dialogs */
  .color-picker-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Dialog window — fixed width, auto height, no resize */
  .color-picker-window {
    width: auto;
    max-width: calc(100vw - 32px);
    box-sizing: border-box;
    min-width: 0;
    min-height: 0;
    position: relative;
  }

  /* Override the generic .window-body padding for the color picker */
  .color-picker-window .window-body.color-picker-body {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
    overflow: visible;
  }

  /* ── Left panel ──────────────────────────────────────────────────────── */
  .cp-left-panel {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
  }

  .cp-section-label {
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 2px;
    color: #000;
  }

  /* Swatch grids — 8 columns, auto rows */
  .cp-swatch-grid {
    display: grid;
    grid-template-columns: repeat(8, 18px);
    gap: 2px;
    margin-bottom: 4px;
  }

  .cp-basic-grid {
    /* 6 rows of 8 = 48 swatches */
  }

  .cp-custom-grid {
    /* 2 rows of 8 = 16 swatches */
  }

  /* Individual swatch cell */
  .cp-swatch-cell {
    width: 18px;
    height: 18px;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    box-shadow: inset 1px 1px 0 #404040;
    cursor: pointer;
    flex-shrink: 0;
    box-sizing: border-box;
  }

  .cp-swatch-cell:hover {
    border-color: #000 #c0c0c0 #c0c0c0 #000;
  }

  /* Selected swatch — high-contrast outline */
  .cp-swatch-cell.cp-swatch-selected {
    border-color: #000000;
    box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #000000;
  }

  /* "Add to Custom Colors" button */
  .cp-add-custom-btn {
    margin-top: 6px;
    font-size: 12px;
    padding: 3px 8px;
    height: 24px;
    white-space: nowrap;
  }

  .cp-left-panel .cp-hex-row {
    margin-top: 4px;
  }

  /* ── Right panel ─────────────────────────────────────────────────────── */
  .cp-right-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
  }

  /* Row containing spectrum + brightness slider + preview box */
  .cp-spec-row {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: flex-start;
  }

  /* ── Spectrum canvas ─────────────────────────────────────────────────── */
  .cp-spectrum-wrap {
    position: relative;
    width: 256px;
    height: 256px;
    flex-shrink: 0;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    box-sizing: content-box;
    cursor: crosshair;
  }

  .cp-spectrum-canvas {
    display: block;
    width: 256px;
    height: 256px;
  }

  /* Crosshair dot — small circle with contrasting ring */
  .cp-crosshair {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1px solid #000;
    box-shadow: 0 0 0 1px #fff;
    background: transparent;
    transform: translate(-50%, -50%);
    pointer-events: none;
    /* position set via JS: top/left */
  }

  /* ── Brightness slider ───────────────────────────────────────────────── */
  .cp-brightness-wrap {
    position: relative;
    width: 20px;
    height: 256px;
    flex-shrink: 0;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    box-sizing: content-box;
    cursor: ns-resize;
  }

  .cp-brightness-canvas {
    display: block;
    width: 20px;
    height: 256px;
  }

  /* Arrow indicator beside the brightness slider */
  .cp-brightness-arrow {
    position: absolute;
    right: -10px;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 8px solid #000;
    transform: translateY(-50%);
    pointer-events: none;
    /* top set via JS */
  }

  /* ── Color preview ───────────────────────────────────────────────────── */
  .cp-preview-box {
    width: 60px;
    height: 256px;
    display: flex;
    flex-direction: column;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    box-sizing: content-box;
    flex-shrink: 0;
    overflow: hidden;
  }

  /* Top half: new (selected) color */
  .cp-preview-new {
    flex: 1;
    background: #FF0000;
  }

  /* Bottom half: original color passed in */
  .cp-preview-current {
    flex: 1;
    background: #FF0000;
  }

  /* ── Numeric inputs area ─────────────────────────────────────────────── */
  .cp-inputs-area {
    display: flex;
    flex-direction: row;
    gap: 16px;
  }

  .cp-bottom-row {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: flex-end;
  }

  .cp-button-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-left: auto;
  }

  .cp-input-col {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  .cp-input-row {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .cp-input-label {
    font-size: 12px;
    width: 26px;
    text-align: right;
    flex-shrink: 0;
  }

  .cp-number-input {
    width: 44px;
    font-family: inherit;
    font-size: 12px;
    padding: 1px 4px;
    height: 22px;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    background: #ffffff;
    outline: none;
    /* Hide spinner arrows for a cleaner XP look */
    -moz-appearance: textfield;
  }

  .cp-number-input::-webkit-inner-spin-button,
  .cp-number-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  /* ── Hex input row ───────────────────────────────────────────────────── */
  .cp-hex-row {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .cp-hex-label {
    font-size: 13px;
    font-weight: bold;
    flex-shrink: 0;
  }

  .cp-hex-input {
    width: 80px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    padding: 2px 4px;
    height: 24px;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    background: #ffffff;
    outline: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .cp-ok-btn,
  .cp-cancel-btn {
    min-width: 72px;
    justify-content: center;
    font-size: 13px;
  }

  /* =========================================================================
     Dark mode — Color Picker
     ========================================================================= */

  body.dark-mode .color-picker-overlay {
    background: rgba(0, 0, 0, 0.55);
  }

  body.dark-mode .color-picker-window {
    background: #2d2d3d;
    border-color: #4a4a5a #1a1a2a #1a1a2a #4a4a5a;
  }

  body.dark-mode .cp-section-label {
    color: #e0e0e0;
  }

  body.dark-mode .cp-swatch-cell {
    border-color: #555 #2a2a3a #2a2a3a #555;
    box-shadow: inset 1px 1px 0 #222;
  }

  body.dark-mode .cp-swatch-cell:hover {
    border-color: #aaa #333 #333 #aaa;
  }

  body.dark-mode .cp-swatch-cell.cp-swatch-selected {
    border-color: #aaa;
    box-shadow: 0 0 0 1px #333, 0 0 0 2px #ccc;
  }

  body.dark-mode .cp-spectrum-wrap,
  body.dark-mode .cp-brightness-wrap,
  body.dark-mode .cp-preview-box {
    border-color: #555 #2a2a3a #2a2a3a #555;
  }

  body.dark-mode .cp-brightness-arrow {
    border-right-color: #e0e0e0;
  }

  body.dark-mode .cp-number-input,
  body.dark-mode .cp-hex-input {
    background: #1e1e2e;
    color: #e0e0e0;
    border-color: #555 #2a2a3a #2a2a3a #555;
  }

  body.dark-mode .cp-hex-label,
  body.dark-mode .cp-input-label {
    color: #e0e0e0;
  }

  /* ── Transparency support ─────────────────────────────────────────────── */

  /* Checkerboard pattern for transparent color previews (color picker) */
  .cp-checkerboard {
    background-image:
      linear-gradient(45deg, #ccc 25%, transparent 25%),
      linear-gradient(-45deg, #ccc 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, #ccc 75%),
      linear-gradient(-45deg, transparent 75%, #ccc 75%) !important;
    background-size: 12px 12px !important;
    background-position: 0 0, 0 6px, 6px -6px, -6px 0 !important;
    background-color: #fff !important;
  }

  /* Checkerboard pattern for swatch previews in edit panel */
  .swatch-checkerboard {
    background-image:
      linear-gradient(45deg, #ccc 25%, transparent 25%),
      linear-gradient(-45deg, #ccc 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, #ccc 75%),
      linear-gradient(-45deg, transparent 75%, #ccc 75%) !important;
    background-size: 8px 8px !important;
    background-position: 0 0, 0 4px, 4px -4px, -4px 0 !important;
    background-color: #fff !important;
  }

  /* Disabled state for color picker controls when transparent is checked */
  .cp-disabled {
    opacity: 0.4;
    pointer-events: none;
  }

  /* Transparent checkbox row in color picker */
  .cp-transparent-row {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .cp-transparent-label {
    font-size: 12px;
    cursor: pointer;
    user-select: none;
  }

  /* Dark mode checkerboard variants */
  body.dark-mode .cp-checkerboard {
    background-color: #333 !important;
    background-image:
      linear-gradient(45deg, #555 25%, transparent 25%),
      linear-gradient(-45deg, #555 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, #555 75%),
      linear-gradient(-45deg, transparent 75%, #555 75%) !important;
  }

  body.dark-mode .swatch-checkerboard {
    background-color: #333 !important;
    background-image:
      linear-gradient(45deg, #555 25%, transparent 25%),
      linear-gradient(-45deg, #555 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, #555 75%),
      linear-gradient(-45deg, transparent 75%, #555 75%) !important;
  }

  body.dark-mode .cp-transparent-label {
    color: #e0e0e0;
  }

  /* ── Drag and Drop System ────────────────────────────────────────────────── */

  body.barcode-dragging,
  body.barcode-dragging * {
    cursor: grabbing !important;
  }

  /* Drag ghost element */
  .barcode-drag-ghost {
    position: fixed;
    pointer-events: none;
    z-index: 99999;
    opacity: 0.75;
    border: 2px solid #0078d7;
    background: white;
    border-radius: 2px;
    box-shadow: 2px 4px 12px rgba(0,0,0,0.3);
    max-width: 120px;
    max-height: 120px;
  }

  /* Drop target highlights */
  .window.drag-over-valid {
    outline: 2px solid #00aa00;
  }

  .window.drag-over-invalid {
    outline: 2px solid #cc0000;
    position: relative;
  }

  .window.drag-over-invalid::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(200, 0, 0, 0.15);
    pointer-events: none;
    z-index: 9999;
  }

  /* Barcode images are draggable */
  .output-panel img {
    cursor: grab;
  }

  .output-panel img:active {
    cursor: grabbing;
  }

  /* Popout window body scrolling */
  .popout-window .window-body {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* Single barcode: fills available space, no grid constraint */
  .popout-window .output-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px;
    flex: 1;
    min-height: 0;
  }

  .popout-window .output-panel img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  /* Multi-barcode: grid layout managed by autoSizePopoutWindow */
  .popout-window .output-panel.multi-barcode {
    display: grid;
    gap: 8px;
    padding: 8px;
    width: 100%;
    flex: 1;
    min-height: 0;
    align-content: start;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .popout-window .output-panel.multi-barcode img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* ── QR Code Helper ──────────────────────────────────────────────────────── */

  /* QR Options dropdown wrapper — matches .custom-dropdown / type-dropdown style */
  .qr-helper-dropdown-wrapper {
    flex: 0 0 auto;
    width: auto;
    min-width: 110px;
  }

  .qr-helper-dropdown-wrapper .dropdown-trigger {
    height: 30px;
    font-size: 14px;
  }

  /* Popup panel — matches .type-popup structure */
  .qr-helper-popup {
    background: #c0c0c0;
    border: 3px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    width: 220px;
    max-width: calc(100vw - 24px);
    user-select: none;
  }

  /* Icon column in QR helper items */
  .qr-helper-item-icon {
    font-size: 15px;
    line-height: 1;
    flex-shrink: 0;
    width: 20px;
    text-align: center;
  }

  .qr-helper-item-label {
    flex: 1;
  }

  /* Dialog overrides for qr-helper form */
  .qr-helper-dialog {
    width: 380px;
    min-height: 0;
  }

  .qr-helper-dialog .window-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .qr-helper-fieldset {
    margin: 0;
  }

  /* Form field rows inside the QR helper dialog */
  .qr-field-row {
    align-items: flex-start !important;
    gap: 6px !important;
    margin-bottom: 6px !important;
  }

  .qr-field-label {
    font-size: 13px;
    width: 100px !important;
    flex-shrink: 0;
    text-align: right;
    padding-top: 3px;
    line-height: 1.4;
  }

  .qr-field-required {
    font-weight: bold;
  }

  .qr-field-input {
    flex: 1;
    font-family: inherit;
    font-size: 13px;
    padding: 2px 4px;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    background: #ffffff;
    outline: none;
    min-width: 0;
    height: 26px;
    box-sizing: border-box;
  }

  .qr-field-input:focus {
    border-color: #0078d7 #c0c0c0 #c0c0c0 #0078d7;
  }

  .qr-field-input.qr-field-error {
    border-color: #cc0000 #ffaaaa #ffaaaa #cc0000;
    background: #fff0f0;
  }

  .qr-field-textarea {
    height: 64px !important;
    resize: vertical;
    font-family: inherit;
    line-height: 1.4;
  }

  /* Dropdown inside qr helper rows */
  .qr-field-row .custom-dropdown.settings-dropdown {
    flex: 1;
    min-width: 0;
  }

  .qr-field-row .settings-dropdown .dropdown-trigger {
    height: 24px;
    font-size: 13px;
    padding: 2px 26px 2px 6px;
  }

  /* Dark mode — QR helper */
  body.dark-mode .qr-helper-popup {
    background: #2d2d2d;
    border-color: #555 #333 #333 #555;
  }

  body.dark-mode .qr-helper-dialog .qr-field-label {
    color: #e0e0e0;
  }

  body.dark-mode .qr-field-input {
    background: #1a1a1a;
    color: #e0e0e0;
    border-color: #555 #333 #333 #555;
  }

  body.dark-mode .qr-field-input:focus {
    border-color: #4a9eda #333 #333 #4a9eda;
  }

  body.dark-mode .qr-field-input.qr-field-error {
    border-color: #cc4444 #442222 #442222 #cc4444;
    background: #2a1a1a;
  }

  /* Mobile adjustments */
  @media (max-width: 600px) {
    .qr-helper-dialog {
      width: calc(100vw - 32px);
      max-width: 380px;
    }

    .qr-field-label {
      width: 85px !important;
      font-size: 12px;
    }
  }