@keyframes dt-spin { to { transform: rotate(360deg); } }
.dt-wrap * { box-sizing: border-box; }
.dt-wrap { display: flex; width: 100%; height: 720px; background: #111; color: #e8e8e8; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 13px; border-radius: 12px; overflow: hidden; }
.dt-panel { width: 220px; min-width: 200px; background: #1a1a1a; padding: 14px 12px; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #333 transparent; }
.dt-panel--left  { border-right: 1px solid #252525; }
.dt-panel--right { border-left:  1px solid #252525; }
.dt-logo-img img { width: 100%; max-width: 180px; height: auto; display: block; margin-bottom: 2px; }
.dt-section-title { font-size: 10px; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: .8px; }
.dt-hint { font-size: 10px; color: #555; line-height: 1.5; margin: 0; }
.dt-divider { height: 1px; background: #222; margin: 2px 0; }
.dt-upload-btn { display: flex; align-items: center; gap: 7px; background: #252525; border: 1px dashed #383838; color: #bbb; padding: 8px 10px; border-radius: 7px; cursor: pointer; font-size: 12px; transition: border-color .2s; }
.dt-upload-btn:hover { border-color: #666; }
.dt-range { width: 100%; accent-color: #e05c2d; cursor: pointer; }
.dt-resize-header { display: flex; align-items: center; justify-content: space-between; }
.dt-unit-toggle { display: flex; border-radius: 5px; overflow: hidden; border: 1px solid #333; }
.dt-unit-btn { background: #252525; border: none; color: #777; font-size: 10px; font-weight: 600; padding: 3px 8px; cursor: pointer; }
.dt-unit-btn.active { background: #e05c2d; color: #fff; }
.dt-resize-row { display: flex; align-items: flex-end; gap: 5px; }
.dt-resize-field { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.dt-resize-label { font-size: 9px; color: #666; text-transform: uppercase; letter-spacing: .6px; }
.dt-num-input { width: 100%; background: #252525; border: 1px solid #333; color: #ddd; padding: 5px 6px; border-radius: 6px; font-size: 12px; text-align: center; }
.dt-num-input:focus { outline: none; border-color: #e05c2d; }
.dt-fit-row { display: flex; gap: 5px; }
.dt-lock-btn { width: 28px; height: 28px; flex-shrink: 0; border-radius: 6px; border: 1px solid #333; background: #252525; color: #666; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: all .15s; }
.dt-lock-btn.active { border-color: #e05c2d; color: #e05c2d; background: #2a1a10; }
.dt-dpi-box { background: #1e1e1e; border: 1px solid #2a2a2a; border-radius: 7px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.dt-dpi-row { display: flex; align-items: baseline; justify-content: space-between; }
.dt-dpi-label { font-size: 9px; font-weight: 600; color: #666; text-transform: uppercase; letter-spacing: .8px; }
.dt-dpi-val { font-size: 20px; font-weight: 700; color: #e8e8e8; line-height: 1; }
.dt-dpi-bar-wrap { position: relative; height: 6px; background: #2a2a2a; border-radius: 3px; margin-bottom: 10px; }
.dt-dpi-bar { height: 100%; border-radius: 3px; transition: width .3s, background .3s; width: 0%; }
.dt-dpi-tick { position: absolute; top: 8px; transform: translateX(-50%); }
.dt-dpi-tick span { font-size: 8px; color: #444; }
.dt-dpi-tick--300 { transform: translateX(-100%); }
.dt-dpi-msg { font-size: 10px; line-height: 1.4; }
.dt-dpi-msg.good { color: #4caf7d; }
.dt-dpi-msg.warn { color: #f5a623; }
.dt-dpi-msg.bad  { color: #e05c2d; }
.dt-alpha-notice { display: flex; align-items: flex-start; gap: 6px; padding: 7px 9px; border-radius: 7px; border: 1px solid; font-size: 10px; line-height: 1.5; }
.dt-alpha-notice.has-semi { border-color: #7a4a1a; background: #1e1505; color: #f5a623; }
.dt-layer-list { display: flex; flex-direction: column; gap: 4px; }
.dt-layer-item { display: flex; align-items: center; gap: 6px; background: #202020; border: 2px solid #2a2a2a; border-radius: 7px; padding: 5px 7px; cursor: pointer; transition: border-color .15s; }
.dt-layer-item:hover  { border-color: #444; }
.dt-layer-item.selected { border-color: #e05c2d; background: #231a14; }
.dt-distress-item { opacity: 0.45; }
.dt-distress-item.applied { opacity: 1; border-color: #e05c2d !important; background: #231a14; }
.dt-layer-thumb { width: 36px; height: 36px; border-radius: 4px; object-fit: cover; flex-shrink: 0; background: #fff; }
.dt-thumb-hover-popup { position: fixed; display: none; width: 220px; background: #101010; border: 1px solid #333; border-radius: 10px; box-shadow: 0 16px 40px rgba(0,0,0,.55); padding: 8px; z-index: 100001; pointer-events: none; }
.dt-thumb-hover-img { width: 100%; height: 180px; display: block; border-radius: 7px; object-fit: contain; background: repeating-conic-gradient(#3f3f3f 0% 25%, #2c2c2c 0% 50%) 0 0 / 14px 14px; }
.dt-thumb-hover-label { margin-top: 6px; font-size: 10px; color: #a0a0a0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt-layer-info { flex: 1; min-width: 0; }
.dt-layer-name { font-size: 11px; color: #ccc; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-layer-sub  { font-size: 9px; color: #555; margin-top: 1px; }
.dt-layer-item.selected .dt-layer-sub { color: #e05c2d; }
.dt-layer-del { background: none; border: none; color: #444; cursor: pointer; font-size: 16px; line-height: 1; padding: 0 2px; flex-shrink: 0; transition: color .15s; }
.dt-layer-del:hover { color: #e05c2d; }
.dt-eye-btn { background: none; border: none; cursor: pointer; padding: 2px; flex-shrink: 0; color: #555; transition: color .15s; }
.dt-eye-btn.on { color: #e05c2d; }
.dt-checkbox-row { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 6px 9px; background: #222; border-radius: 7px; border: 1px solid #2a2a2a; }
.dt-checkbox-row:hover { border-color: #444; }
.dt-checkbox-row input[type="checkbox"] { accent-color: #e05c2d; width: 14px; height: 14px; cursor: pointer; flex-shrink: 0; }
.dt-checkbox-label { font-size: 11px; color: #ccc; flex: 1; }
.dt-info-btn { width: 16px; height: 16px; border-radius: 50%; border: 1px solid #444; background: #252525; color: #888; font-size: 10px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0; }
.dt-info-btn:hover { border-color: #e05c2d; color: #e05c2d; }
.dt-bg-swatches { display: flex; flex-wrap: wrap; gap: 5px; }
.dt-swatch { width: 28px; height: 28px; border-radius: 5px; border: 2px solid #333; cursor: pointer; transition: border-color .15s; }
.dt-swatch:hover, .dt-swatch.active { border-color: #e05c2d; }
.dt-swatch-check { background: repeating-conic-gradient(#555 0% 25%,#333 0% 50%) 0 0/10px 10px; }
.dt-custom-swatch { position: relative; width: 28px; height: 28px; border-radius: 5px; border: 2px solid #333; cursor: pointer; overflow: hidden; background: conic-gradient(red,yellow,lime,cyan,blue,magenta,red); transition: border-color .15s; }
.dt-custom-swatch:hover, .dt-custom-swatch.active { border-color: #e05c2d; }
.dt-custom-swatch input[type=color] { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; border: none; padding: 0; }
.dt-btn { width: 100%; padding: 8px 10px; border-radius: 7px; border: none; font-size: 12px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 5px; transition: opacity .15s; }
.dt-btn--secondary { background: #262626; color: #bbb; border: 1px solid #353535; }
.dt-btn--ghost { background: transparent; color: #666; border: 1px solid #2a2a2a; }
.dt-wrap #dt-htoverlay-toggle { border-color: #2a2a2a !important; color: #666 !important; }
.dt-wrap #dt-htoverlay-toggle:hover { border-color: #444 !important; color: #aaa !important; }
.dt-btn--export { background: #1a6e42; color: #fff; }
.dt-btn:hover { opacity: .85; }
.dt-canvas-area { flex: 1; display: flex; flex-direction: column; padding: 14px 16px; gap: 8px; background: #111; min-width: 0; min-height: 0; overflow: hidden; }
.dt-canvas-topbar { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.dt-canvas-label { font-size: 10px; font-weight: 600; color: #555; text-transform: uppercase; letter-spacing: .8px; }
.dt-zoom-controls { display: flex; align-items: center; gap: 4px; }
.dt-zoom-btn { background: #252525; border: 1px solid #333; color: #aaa; border-radius: 5px; cursor: pointer; padding: 3px 8px; font-size: 11px; font-weight: 600; }
.dt-zoom-btn:hover { border-color: #666; color: #fff; }
#dt-zoom-val { font-size: 11px; color: #555; min-width: 36px; text-align: center; }
.dt-viewport { flex: 1; overflow: auto; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: #080808; min-height: 0; padding: 20px; position: relative; scrollbar-width: thin; scrollbar-color: #555 #1a1a1a; }
.dt-artboard { position: relative; display: inline-block; line-height: 0; flex-shrink: 0; }
.dt-bg-layer { position: absolute; inset: 0; pointer-events: none; border-radius: 2px; z-index: 0; }
#dt-canvas { display: block; position: relative; z-index: 1; image-rendering: pixelated; image-rendering: crisp-edges; }
.dt-size-badge { display: none !important; visibility: hidden !important; }
.dt-empty-state { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 10px; color: #3a3a3a; font-size: 13px; }
.dt-canvas-info { font-size: 11px; font-weight: 600; color: #e05c2d; text-align: center; flex-shrink: 0; letter-spacing: .3px; }
.dt-arrow-pad { display: grid; grid-template-columns: repeat(3,1fr); gap: 3px; }
.dt-arrow-btn { background: #252525; border: 1px solid #333; color: #aaa; border-radius: 5px; cursor: pointer; padding: 6px; font-size: 12px; display: flex; align-items: center; justify-content: center; transition: all .15s; }
.dt-arrow-btn:hover { border-color: #666; color: #fff; }
.dt-arrow-btn:active { background: #e05c2d; border-color: #e05c2d; color: #fff; }
.dt-nudge-row { display: flex; align-items: center; gap: 5px; }
.dt-nudge-size { background: #252525; border: 1px solid #333; color: #777; font-size: 9px; font-weight: 600; border-radius: 4px; padding: 2px 6px; cursor: pointer; transition: all .15s; }
.dt-nudge-size.active { background: #e05c2d; border-color: #e05c2d; color: #fff; }
.dt-rotate-row { display: flex; gap: 4px; }
.dt-rotate-btn { flex: 1; padding: 5px 2px; border-radius: 6px; border: 1px solid #333; background: #252525; color: #888; font-size: 10px; font-weight: 600; cursor: pointer; transition: all .15s; }
.dt-rotate-btn.active { background: #e05c2d; border-color: #e05c2d; color: #fff; }
/* compare active: edited canvas cursor */
#dt-canvas.compare-active { cursor: ew-resize; }

@media (max-width: 900px) { .dt-wrap { flex-direction: column; } .dt-panel { width: 100%; } }
/* color knockout */
.dt-knockout-row { display: flex; align-items: center; gap: 6px; }
.dt-knockout-swatch-wrap { position: relative; width: 32px; height: 32px; flex-shrink: 0; border-radius: 6px; border: 2px solid #333; overflow: visible; cursor: pointer; }
.dt-knockout-preview { width: 100%; height: 100%; }
.dt-knockout-color-input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; border: none; padding: 0; }
.dt-knockout-picker-popup { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(300px, 92vw); background: #121212; border: 1px solid #2a2a2a; border-radius: 12px; padding: 10px; box-shadow: 0 24px 60px rgba(0,0,0,.6); z-index: 100000; }
.dt-knockout-color-hex { flex: 1; background: #181818; border: 1px solid #333; color: #fff; border-radius: 8px; padding: 9px 10px; font-size: 12px; letter-spacing: .02em; outline: none; }
.dt-levels-control { position: relative; height: 22px; margin-top: 2px; }
.dt-levels-track { position: absolute; left: 0; right: 0; top: 9px; height: 4px; background: #3a3a3a; border-radius: 999px; }
.dt-levels-handle { position: absolute; top: 1px; width: 18px; height: 18px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.6); transform: translateX(-50%); cursor: grab; }
.dt-levels-handle:active { cursor: grabbing; }
.dt-levels-handle.shadow { background: #000; }
.dt-levels-handle.mid { background: #8e8e8e; }
.dt-levels-handle.highlight { background: #fff; }
.dt-levels-values { display: flex; gap: 8px; margin-top: 8px; }
.dt-levels-box { flex: 1; background: #252525; border: 1px solid #3a3a3a; color: #e0e0e0; border-radius: 4px; font-size: 11px; text-align: center; padding: 4px 0; }
.dt-levels-box input[type="number"] {
  width: 100%;
  background: transparent;
  border: none;
  color: #e0e0e0;
  font-size: 11px;
  text-align: center;
  outline: none;
}

.dt-crop-overlay { position: absolute; inset: 0; z-index: 16; pointer-events: none; }
.dt-crop-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.35); }
.dt-crop-box {
  position: absolute;
  border: 2px solid #e05c2d;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.28);
  background: rgba(255,255,255,.02);
  pointer-events: auto;
  cursor: move;
}
.dt-crop-box .dt-crop-label {
  position: absolute;
  left: 8px;
  top: -22px;
  background: #e05c2d;
  color: #fff;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
}
.dt-crop-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #e05c2d;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
  pointer-events: auto;
}
.dt-crop-handle.nw { left: -7px; top: -7px; cursor: nwse-resize; }
.dt-crop-handle.ne { right: -7px; top: -7px; cursor: nesw-resize; }
.dt-crop-handle.sw { left: -7px; bottom: -7px; cursor: nesw-resize; }
.dt-crop-handle.se { right: -7px; bottom: -7px; cursor: nwse-resize; }

.dt-crop-margin-menu { background: #c2b9a0; border: 1px solid #8a836d; border-radius: 8px; padding: 8px; }
.dt-crop-margin-option { width: 100%; background: #252525; border: 1px solid #3a3a3a; color: #e9e4d5; border-radius: 8px; padding: 6px 8px; font-size: 10px; line-height: 1.2; cursor: pointer; }
.dt-crop-margin-option.active { background: #e2dcc8; border-color: #6f6855; color: #201d15; }
.dt-crop-margin-option:focus { outline: none; }
.dt-crop-margin-unit-btn { flex: 1; background: #252525; border: 1px solid #3a3a3a; color: #e9e4d5; border-radius: 8px; padding: 6px 8px; font-size: 10px; cursor: pointer; }
.dt-crop-margin-unit-btn.active { background: #e2dcc8; border-color: #6f6855; color: #201d15; }
/* fullscreen */
.dt-wrap.dt-fullscreen { position: fixed; inset: 0; z-index: 99999; border-radius: 0; height: 100vh; }
.dt-wrap.dt-fullscreen .dt-viewport { min-height: 0; }
/* flashing threshold button */
@keyframes dt-flash-red {
  0%, 100% { border-color: #ff0000; background: #2a0505; color: #ff0000; }
  50%       { border-color: #ff3333; background: #3a0808; color: #ff4444; }
}
.dt-thresh-flash { animation: dt-flash-red 1s ease-in-out infinite; }
/* group headers in distress list */
.dt-group-header { display: flex; align-items: center; justify-content: space-between; cursor: pointer; padding: 5px 2px; user-select: none; }
.dt-group-header:hover .dt-group-label { color: #ccc; }
.dt-group-label { font-size: 10px; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: .8px; }
.dt-group-chevron { color: #555; transition: transform .2s; }
.dt-group-chevron.open { transform: rotate(90deg); }
.dt-group-items { display: none; }
.dt-group-items.open { display: flex; flex-direction: column; gap: 4px; }
.dt-layer-hidden { opacity: 0.35 !important; }
#dt-eraser-cursor { mix-blend-mode: difference; }
.dt-layer-hidden .dt-layer-name { text-decoration: line-through; color: #666; }