.rprt { max-width: 680px; }
.rprt-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.rprt-tab {
  padding: 8px 12px; font-size: 13px; font-weight: 700; border: 1px solid #d9e0d4; border-radius: 6px;
  background: #fff; cursor: pointer; color: #27331f;
}
.rprt-tab-active { background: #19616a; border-color: #19616a; color: #fff; }
.rprt-panel { display: flex; flex-direction: column; gap: 12px; }
.rprt-panel label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 700; color: #27331f; }
.rprt-panel input, .rprt-panel select { padding: 9px 11px; font-size: 14.5px; border: 1px solid #d9e0d4; border-radius: 6px; }
.rprt-panel input:focus, .rprt-panel select:focus { outline: 2px solid #19616a; outline-offset: 1px; }
.rprt-row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.rprt-row2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.rprt-hint { font-size: 12.5px; color: #5b6b56; margin: 4px 0 0; }
.rprt-note { margin-top: 16px; font-size: 13px; color: #5b6b56; }
.rprt-note code { font-family: ui-monospace, monospace; color: #19616a; }

input[type="color"] {
  padding: 3px !important; height: 42px; width: 100%; cursor: pointer;
}
input[type="range"] { padding: 0 !important; border: none !important; }

.rprt-download-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 14px; font-size: 13.5px; font-weight: 700; border-radius: 6px;
  background: #19616a; color: #fff; text-decoration: none; width: fit-content;
}
.rprt-download-link:hover { background: #144a52; }
.rprt-download-link[aria-disabled="true"] {
  background: #d9e0d4; color: #5b6b56; pointer-events: none;
}

/* --- Sky Maker --- */
.rprt-sky-preview {
  height: 140px; border: 1px solid #d9e0d4; border-radius: 6px;
  display: flex; align-items: flex-end; justify-content: center; overflow: hidden; position: relative;
}
.rprt-sky-cloud-layer {
  position: absolute; top: 10px; left: 0; right: 0; height: 26px; opacity: 0.55;
  border-radius: 50%; filter: blur(2px);
}
.rprt-swatch-row { display: flex; flex-wrap: wrap; gap: 16px; }
.rprt-swatch-item { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.rprt-swatch-item canvas {
  width: 64px; height: 64px; border: 1px solid #d9e0d4; border-radius: 6px; image-rendering: pixelated;
}
.rprt-swatch-label { font-size: 12.5px; font-weight: 700; color: #27331f; }

/* --- Enchant Glint --- */
@keyframes rprt-glint-scroll { from { background-position: 0 0; } to { background-position: 64px -64px; } }
.rprt-glint-preview {
  height: 90px; border: 1px solid #d9e0d4; border-radius: 6px; overflow: hidden;
  background-size: 32px 32px; background-repeat: repeat;
  background-image: repeating-linear-gradient(45deg, var(--rprt-glint-c, #7b34bf) 0 8px, transparent 8px 16px);
  animation: rprt-glint-scroll 1.2s linear infinite;
}
.rprt-glint-canvas-wrap canvas {
  width: 96px; height: 96px; border: 1px solid #d9e0d4; border-radius: 6px; image-rendering: pixelated;
  background: repeating-conic-gradient(#e7e9ee 0 90deg, #f3f4f8 0 180deg) 0 0/12px 12px;
}
.rprt-glint-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.rprt-range-value { font-size: 12.5px; color: #5b6b56; font-weight: 400; }

/* --- Item & Block Texture Maker / Mob Skin Maker (shared upload/preview chrome) --- */
.rprt-upload-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.rprt-preview-pair { display: flex; flex-wrap: wrap; gap: 16px; }
.rprt-preview-box { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.rprt-preview-box canvas {
  border: 1px solid #d9e0d4; border-radius: 6px; image-rendering: pixelated; max-width: 160px; max-height: 160px;
  background: repeating-conic-gradient(#e7e9ee 0 90deg, #f3f4f8 0 180deg) 0 0/12px 12px;
}
.rprt-preview-label { font-size: 12.5px; font-weight: 700; color: #27331f; }
.rprt-placeholder {
  width: 128px; height: 128px; border: 1px dashed #d9e0d4; border-radius: 6px;
  background: #f3f4f8; display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: #5b6b56; text-align: center; line-height: 1.3; padding: 6px; box-sizing: border-box;
}
.rprt-snippet {
  margin: 0; padding: 10px 12px; background: #f3f4f8; border: 1px solid #d9e0d4; border-radius: 6px;
  font-family: ui-monospace, monospace; font-size: 12px; color: #27331f; overflow-x: auto; white-space: pre-wrap;
  word-break: break-word;
}

@media (max-width: 480px) {
  .rprt-row3 { grid-template-columns: 1fr; }
  .rprt-row2 { grid-template-columns: 1fr; }
}