.paint-workspace {
  min-height: 640px;
  overflow: hidden;
}

.paint-workspace-heading {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
}

.paint-workspace-heading h2 {
  margin: 0;
  font-family: Georgia, "Noto Serif SC", serif;
  font-size: 1.08rem;
  font-weight: 500;
}

.paint-tools {
  display: flex;
  align-items: center;
  gap: 7px;
}

.paint-tools button {
  min-width: 40px;
  min-height: 38px;
  padding: 0 11px;
}

.paint-tools output {
  min-width: 58px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.paint-notice {
  min-height: 42px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  background: rgba(5, 16, 22, .52);
  font-size: .78rem;
  line-height: 1.45;
}

.paint-notice[data-kind="success"] { color: #8fe6d3; }
.paint-notice[data-kind="error"] { color: #f5aaa0; }

.paint-viewport {
  position: relative;
  height: calc(100vh - 190px);
  min-height: 550px;
  overflow: hidden;
  outline: none;
  cursor: crosshair;
  touch-action: none;
  background-color: #101b23;
  background-image:
    linear-gradient(45deg, rgba(255, 255, 255, .035) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255, 255, 255, .035) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, .035) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, .035) 75%);
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
  user-select: none;
}

.paint-viewport:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(99, 220, 196, .65);
}

.paint-viewport.dragging { cursor: grabbing; }

.paint-stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 1000px;
  height: 1000px;
  transform-origin: 0 0;
  will-change: transform;
}

.paint-stage canvas {
  display: block;
  width: 1000px;
  height: 1000px;
  border: 0;
  outline: 1px solid rgba(7, 17, 24, .8);
  background: #fff;
  box-shadow: 0 14px 45px rgba(0, 0, 0, .38);
  image-rendering: pixelated;
}

.paint-grid-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}


.paint-selection {
  position: absolute;
  z-index: 4;
  box-sizing: border-box;
  border: 2px solid #ffd54f;
  outline: 2px solid rgba(4, 12, 16, .92);
  background: rgba(255, 213, 79, .2);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .9), 0 0 18px rgba(255, 213, 79, .82);
  pointer-events: none;
}

.paint-selection::before,
.paint-selection::after {
  position: absolute;
  top: 50%;
  left: 50%;
  background: #ffd54f;
  box-shadow: 0 0 0 1px rgba(4, 12, 16, .9);
  content: "";
  transform: translate(-50%, -50%);
}

.paint-selection::before { width: calc(100% + 14px); height: 1px; }
.paint-selection::after { width: 1px; height: calc(100% + 14px); }

.paint-selection span {
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  min-width: max-content;
  border: 1px solid #ffd54f;
  border-radius: 7px;
  padding: 4px 7px;
  color: #fff5c7;
  background: rgba(4, 12, 16, .96);
  box-shadow: 0 4px 15px rgba(0, 0, 0, .5);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .03em;
  transform: translateX(-50%);
  white-space: nowrap;
}

.paint-selection.label-below span { top: calc(100% + 9px); bottom: auto; }
.paint-selection.compact { border-radius: 3px; }

.paint-control-panel .paint-hint {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.55;
}

.paint-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}

.paint-stat-grid div {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(2, 10, 14, .34);
}

.paint-stat-grid span,
.paint-stat-grid strong {
  display: block;
}

.paint-stat-grid span {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: .66rem;
}

.paint-stat-grid strong {
  overflow: hidden;
  color: #d9e9e5;
  font-size: .83rem;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.paint-stat-grid strong.selected { color: #ffd978; }

.paint-coordinate-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 62px;
  gap: 8px;
  margin-top: 12px;
  align-items: end;
}

.paint-coordinate-fields label {
  min-width: 0;
  color: var(--muted);
  font-size: .68rem;
}

.paint-coordinate-fields input {
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}

.paint-coordinate-fields input.invalid {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(242, 143, 131, .08);
}

.paint-coordinate-fields button {
  min-width: 0;
  min-height: 42px;
  padding: 0 9px;
}

.paint-coordinate-fields input::-webkit-outer-spin-button,
.paint-coordinate-fields input::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
}

.paint-color-fields {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 10px;
  margin-top: 14px;
}

.paint-color-fields label {
  min-width: 0;
  color: var(--muted);
  font-size: .68rem;
}

.paint-color-fields input {
  margin-top: 6px;
}

.paint-color-fields input[type="color"] {
  height: 42px;
  padding: 4px;
  cursor: pointer;
}

.paint-color-fields input.invalid {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(242, 143, 131, .08);
}

.paint-swatch-row {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}

.paint-swatch {
  min-width: 0;
  min-height: 28px;
  border: 2px solid rgba(255, 255, 255, .2);
  border-radius: 8px;
  padding: 0;
}

.paint-swatch.swatch-dark { background: #1f1e33; }
.paint-swatch.swatch-white { background: #fff; }
.paint-swatch.swatch-black { background: #000; }
.paint-swatch.swatch-red { background: #ff4d6d; }
.paint-swatch.swatch-amber { background: #f0c979; }
.paint-swatch.swatch-cyan { background: #63dcc4; }
.paint-swatch.swatch-blue { background: #39f; }
.paint-swatch.swatch-purple { background: #9b5de5; }

.paint-swatch:hover {
  border-color: #fff;
}

.paint-confirm {
  width: 100%;
  margin-top: 16px;
}

.paint-batch-panel {
  margin-top: 18px;
  padding: 14px;
  border: 1px solid rgba(99, 220, 196, .22);
  border-radius: 12px;
  background: rgba(2, 10, 14, .32);
}

.paint-batch-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 11px;
}

.paint-batch-heading strong {
  color: #dff8f1;
  font-size: .82rem;
}

.paint-batch-heading span {
  color: var(--muted);
  font-size: .65rem;
}

.paint-batch-panel label {
  display: block;
  color: var(--muted);
  font-size: .68rem;
}

.paint-batch-panel textarea {
  width: 100%;
  min-height: 116px;
  margin-top: 7px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 10px 11px;
  color: #d9eee9;
  background: rgba(1, 8, 12, .78);
  font-family: "Cascadia Code", Consolas, monospace;
  font-size: .72rem;
  line-height: 1.55;
}

.paint-batch-panel textarea:focus {
  border-color: rgba(99, 220, 196, .68);
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 220, 196, .09);
}

.paint-batch-panel textarea.invalid {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(242, 143, 131, .08);
}

.paint-batch-actions {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 8px;
  margin-top: 10px;
}

.paint-batch-actions button { min-width: 0; }

.paint-batch-summary {
  min-height: 2.7em;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: .68rem;
  line-height: 1.5;
}

.paint-batch-summary[data-kind="success"] { color: #8fe6d3; }
.paint-batch-summary[data-kind="error"] { color: #f5aaa0; }

.paint-command-help {
  display: grid;
  gap: 7px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.paint-command-help strong {
  color: var(--muted);
  font-size: .72rem;
}

.paint-command-help code {
  display: block;
  overflow-x: auto;
  padding: 8px 9px;
  border-radius: 8px;
  color: #a9e7da;
  background: rgba(2, 10, 14, .48);
  font-size: .66rem;
  white-space: nowrap;
}

@media (max-width: 980px) {
  .paint-workspace { min-height: 520px; }
  .paint-viewport { height: min(70vh, 720px); min-height: 460px; }
}

@media (max-width: 620px) {
  .paint-workspace-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .paint-tools {
    width: 100%;
    display: grid;
    grid-template-columns: 40px 58px 40px 1fr 1fr;
  }

  .paint-tools output { align-self: center; }
  .paint-viewport { height: 62vh; min-height: 390px; }
  .paint-swatch-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .paint-coordinate-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .paint-coordinate-fields button { grid-column: 1 / -1; }
  .paint-batch-actions { grid-template-columns: 1fr; }
}