:root{
  --bg:#1f1f1f;
  --panel:#2a2a2a;
  --panel2:#242424;
  --text:#e8e8e8;
  --muted:#b9b9b9;
  --border:#3a3a3a;
  --border2:#4a4a4a;
  --btn:#333333;
  --btnHover:#3a3a3a;
  --btnActive:#2d2d2d;
  --shadow:0 8px 18px rgba(0,0,0,0.35);

  --radius:0px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;

  --download:#b24a2f;
  --downloadHover:#c45739;
  --downloadActive:#9f4029;
  --downloadBorder:#d36a4a;
}

*{box-sizing:border-box}
body{margin:0; font-family:var(--sans); color:var(--text); background:var(--bg); line-height:1.3;}

h1.title{margin-bottom:0}
p.subtitle{margin-top:0}

.grid{
  max-width:1200px;
  margin:0 auto;
  padding:16px;
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap:14px;
}
@media (max-width:980px){
  .grid{grid-template-columns:1fr;}
}

.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:14px;
  overflow:hidden;
  min-width:0;
}
.card h2{
  margin:0 0 12px;
  font-size:14px;
  letter-spacing:0.2px;
  color:var(--text);
}

.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center; min-width:0;}
.row + .row{margin-top:10px;}
.spacer{flex:1}

label{font-size:12px; color:var(--muted);}

input[type="number"], input[type="text"], select{
  background:var(--panel2);
  border:1px solid var(--border2);
  border-radius:var(--radius);
  padding:8px 10px;
  color:var(--text);
  outline:none;
  min-width:0;
}
input[type="text"]{font-family:var(--mono);}
input[type="range"]{width:100%}

input[type="file"], input[type="color"]{
  position:absolute !important; left:-9999px !important;
  width:1px !important; height:1px !important; opacity:0 !important;
  pointer-events:none !important;
}

button{
  background:var(--btn);
  border:1px solid var(--border2);
  color:var(--text);
  border-radius:var(--radius);
  padding:8px 10px;
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
}
button:hover{background:var(--btnHover);}
button:active{background:var(--btnActive);}
button:disabled{opacity:0.55; cursor:not-allowed;}

button.download{
  background:var(--download);
  border-color:var(--downloadBorder);
}
button.download:hover{background:var(--downloadHover);}
button.download:active{background:var(--downloadActive);}

/* Use Download styling for other “primary” buttons */
button.downloadlike{
  background:var(--download);
  border-color:var(--downloadBorder);
}
button.downloadlike:hover{background:var(--downloadHover);}
button.downloadlike:active{background:var(--downloadActive);}

.divider{height:1px; background:var(--border); margin:12px 0;}

.dropzone{
  background:var(--panel2);
  border:1px dashed var(--border2);
  border-radius:var(--radius);
  padding:18px;
  min-height:180px;
  display:grid;
  place-items:center;
  text-align:center;
  color:var(--muted);
}
.dropzone.dragover{
  background:#2b2b2b;
  border-color:#6a6a6a;
  color:var(--text);
}
.dzInner{display:grid; gap:10px; place-items:center;}
.dzText{font-size:13px; color:var(--muted);}

.loadingWrap{ position:relative; min-width:0; }
.loadingOverlay{
  position:absolute; inset:0;
  background:rgba(0,0,0,0.45);
  display:none; place-items:center;
  z-index:3;
  border-radius:var(--radius);
}
.loadingOverlay.on{ display:grid; }
.spinner{
  width:18px; height:18px;
  border:2px solid rgba(255,255,255,0.18);
  border-top-color:rgba(255,255,255,0.75);
  border-radius:50%;
  animation:spin 0.8s linear infinite;
  margin-right:10px;
}
@keyframes spin{ to{ transform:rotate(360deg);} }
.loadingLabel{
  display:flex; align-items:center;
  font-size:13px; color:var(--text);
  padding:10px 12px;
  border:1px solid var(--border2);
  background:rgba(40,40,40,0.9);
}

/* Pixel Art settings */
.settingsBlock{
  display:grid;
  gap:10px;
  border:1px solid var(--border);
  background:var(--panel2);
  padding:12px;
  min-width:0;
}
.sliderLine{
  display:grid;
  grid-template-columns: 140px 1fr 70px;
  gap:10px;
  align-items:center;
  min-width:0;
}
.sliderLine .num{width:70px;}
.miniLine{display:flex; gap:10px; align-items:center; flex-wrap:wrap; min-width:0;}
.btnRow{display:flex; gap:10px; align-items:center; flex-wrap:wrap; min-width:0;}

.badge{
  font-family:var(--mono);
  font-size:12px;
  color:var(--muted);
  padding:3px 8px;
  border:1px solid var(--border2);
  background:var(--panel2);
}

/* Preview block */
.previewControls{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:flex-end;
  margin-bottom:10px;
  min-width:0;
}
.toggleGroup{
  display:flex;
  gap:6px;
  align-items:center;
}
.toggleGroup button{ padding:6px 10px; }
.toggleGroup button.on{
  outline:2px solid rgba(255,255,255,0.55);
  outline-offset:0;
}

.canvasBox{
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:12px;
  display:grid;
  place-items:center;
  overflow:auto;              /* clamp height with scrolling */
  min-width:0;
  background:#141414;
  max-height:512px;           /* requested */
}

.bg-black{ background:#000; }
.bg-white{ background:#fff; }
.bg-gray{ background:#7f7f7f; }
.bg-checker{
  background-color:#777;
  background-image:
    linear-gradient(45deg, rgba(0,0,0,0.35) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(0,0,0,0.35) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(0,0,0,0.35) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(0,0,0,0.35) 75%);
  background-size: 24px 24px;
  background-position: 0 0, 0 12px, 12px -12px, -12px 0px;
}

canvas#previewCanvas{
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  border:1px solid var(--border2);
  border-radius:var(--radius);
  background:transparent;
  max-width:100%;
  width:512px;
  height:auto;
}
@media (max-width:980px){
  canvas#previewCanvas{width:min(512px,100%);}
}

.downloadWrap{
  margin-top:10px;
  display:flex;
  justify-content:flex-start;
  gap:10px;
  align-items:flex-end;
  flex-wrap:wrap;
}

/* Export scale block next to Download */
.exportBlock{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

/* Palette */
.paletteTop{display:grid; gap:10px; margin-bottom:10px; min-width:0;}
.palLimitWrap{
  width:100%;
  min-width:0;
  display:grid;
  gap:6px;
}
.palMain{
  border:1px solid var(--border);
  background:var(--panel2);
  padding:10px;
  min-width:0;
  overflow:hidden;
}
.dedupeRow{display:flex; justify-content:flex-start; margin-bottom:10px; gap:10px; flex-wrap:wrap;}

.swatchGrid{
  display:grid;
  grid-template-columns: repeat(8, 44px);
  gap:10px;
  justify-content:flex-start;
  align-content:start;
  min-width:0;
  max-width:100%;
}
@media (max-width:1100px){ .swatchGrid{grid-template-columns: repeat(7, 44px);} }
@media (max-width:980px){ .swatchGrid{grid-template-columns: repeat(8, 44px);} }
@media (max-width:520px){ .swatchGrid{grid-template-columns: repeat(6, 44px);} }

.sw{
  width:44px; height:44px;
  border:1px solid rgba(255,255,255,0.18);
  background:#000;
  cursor:pointer;
  padding:0;
  display:block;
  position:relative;
}
.sw.selected{
  outline:2px solid rgba(255,255,255,0.65);
  outline-offset:0;
}
.sw.plus{
  display:grid;
  place-items:center;
  background:#1b1b1b;
  color:#cfcfcf;
  font-size:20px;
  line-height:1;
  border-style:dashed;
}
.sw.pinned::after{
  content:"";
  position:absolute;
  right:4px; top:4px;
  width:10px; height:10px;
  border:1px solid rgba(255,255,255,0.7);
  background:rgba(255,255,255,0.28);
}

.pinnedBlock{
  margin-bottom:12px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,0.10);
}
.pinnedHeader{
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:10px;
  flex-wrap:wrap;
}
.pinnedHeader .title{
  font-size:12px;
  color:var(--muted);
}

.hidden{display:none !important;}

/* Inspector modal */
.modalBackdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.55);
  display:none;
  place-items:center;
  z-index:999;
  padding:16px;
}
.modalBackdrop.on{display:grid;}

.modal{
  width:min(520px, 100%);
  background:var(--panel);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  border-radius:var(--radius);
  padding:14px;
}
.modalHeader{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.modalTitle{font-size:13px; color:var(--text);}
.modalClose{margin-left:auto; padding:6px 10px;}

.insRow{display:flex; gap:8px; align-items:center; flex-wrap:wrap; min-width:0;}
.insRow input[type="text"]{width:180px;}

/* RGB editor (replaces big rectangle) */
.rgbEditor{
  display:grid;
  gap:10px;
}
.rgbPreview{
  height:44px;
  border:1px solid rgba(255,255,255,0.18);
  background:#000;
}
.rgbRow{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.rgbRow input[type="number"]{
  width:80px;
}