:root {
  --bg:        #232a36;
  --bg-panel:  #2b3340;
  --bg-hatch1: #2f3745;
  --bg-hatch2: #29313d;
  --line:      #3d4757;
  --line-2:    #49556699;
  --txt:       #d7dee8;
  --txt-dim:   #9aa6b5;
  --txt-mute:  #6f7d8f;
  --txt-bright:#eef2f7;
  --blue:      #5c9dff;
  --blue-txt:  #85b6ff;
  --blue-bg:   rgba(92,157,255,0.14);
  --orange:    #ff9a52;
  --orange-bg: rgba(255,154,82,0.15);
  --snippet-bg:#1c222c;
  --checker-1: #2a323f;
  --checker-2: #222a35;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding: 20px;
}

/* ---------- top bar ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  border: 1px solid var(--line);
  background: var(--bg-panel);
  border-radius: 8px 8px 0 0;
  border-bottom: none;
}
.brand { display: flex; align-items: center; gap: 8px; }
.dot { width: 8px; height: 8px; background: var(--blue); border-radius: 1px; }
.brand-name { font-size: 13px; letter-spacing: 1px; color: var(--txt-bright); }
.brand-meta, .flow { font-size: 11px; color: var(--txt-mute); }

/* ---------- grid ---------- */
.grid {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}
@media (max-width: 720px) {
  .grid { grid-template-columns: 1fr; }
}
.panel { background: var(--bg-panel); padding: 14px; }

.panel-label {
  font-size: 11px; letter-spacing: 1px; color: var(--txt-mute);
  margin-bottom: 8px; display: flex; align-items: center; gap: 8px;
}
.panel-label.sub { margin-top: 16px; }

/* ---------- dropzone ---------- */
.dropzone {
  border: 1px dashed var(--line-2);
  background: repeating-linear-gradient(45deg,
    var(--bg-hatch1), var(--bg-hatch1) 8px, var(--bg-hatch2) 8px, var(--bg-hatch2) 16px);
  width: min(100%, 460px);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  text-align: center; cursor: pointer;
  transition: border-color .12s ease;
}
.dropzone.drag { border-color: var(--blue); }
.dz-icon { font-size: 20px; color: var(--blue); letter-spacing: 2px; margin-bottom: 8px; }
.dz-hint { color: var(--txt-mute); font-size: 11px; }
.link-btn {
  background: none; border: none; color: var(--blue-txt); cursor: pointer;
  font-family: inherit; font-size: inherit; text-decoration: underline; padding: 0;
}

/* ---------- crop stage (white artboard) ---------- */
.stage {
  position: relative; user-select: none; line-height: 0; overflow: hidden;
  width: min(100%, 460px); margin: 0 auto;
  border: 1px solid var(--blue); background: #ffffff;
}
.stage canvas { display: block; width: 100%; height: auto; }
.selection {
  position: absolute; border: 1px solid var(--blue);
  box-shadow: inset 0 0 0 1px rgba(61,139,255,0.25), 0 0 0 9999px rgba(6,9,14,0.55);
  cursor: move;
}
.handle {
  position: absolute; width: 9px; height: 9px;
  border: 1px solid var(--blue); background: var(--bg-panel);
}
.handle.nw { top: -5px; left: -5px; cursor: nwse-resize; }
.handle.ne { top: -5px; right: -5px; cursor: nesw-resize; }
.handle.sw { bottom: -5px; left: -5px; cursor: nesw-resize; }
.handle.se { bottom: -5px; right: -5px; cursor: nwse-resize; }
.sel-dims {
  position: absolute; bottom: 3px; left: 4px;
  font-size: 10px; color: var(--blue-txt); background: rgba(6,9,14,0.6); padding: 0 3px;
}

/* ---------- source controls ---------- */
.source-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-top: 10px; font-size: 11px; color: var(--txt-dim);
}
.check { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; color: var(--txt-dim); }
.check input { accent-color: var(--blue); }
.mini-btn {
  background: none; border: 1px solid var(--line-2); color: var(--txt-dim);
  font-family: inherit; font-size: 11px; padding: 3px 8px; cursor: pointer;
  border-radius: 0; transition: border-color .12s, color .12s;
}
.mini-btn:hover { border-color: var(--blue); color: var(--blue-txt); }
.crop-btn { border-color: var(--blue); color: var(--blue-txt); background: var(--blue-bg); }
.crop-btn:hover { background: rgba(92,157,255,0.24); }
.mini-btn.copy { margin-left: auto; }
.coords { margin-left: auto; color: var(--txt-mute); }

/* ---------- format tabs ---------- */
.format-tabs { display: flex; gap: 6px; }
.fmt {
  flex: 1; text-align: center; font-size: 11px; padding: 6px 0;
  border: 1px solid var(--line-2); color: var(--txt-dim);
  background: none; font-family: inherit; cursor: pointer; letter-spacing: 1px;
  transition: border-color .12s, color .12s, background .12s;
}
.fmt:hover { border-color: var(--blue); }
.fmt.active { border-color: var(--blue); color: var(--blue-txt); background: var(--blue-bg); }

/* ---------- resolutions ---------- */
.res-list { display: flex; flex-wrap: wrap; gap: 5px; }
.res {
  font-size: 11px; padding: 3px 8px; border: 1px solid var(--line-2);
  color: var(--txt-mute); background: none; font-family: inherit; cursor: pointer;
  transition: border-color .12s, color .12s;
}
.res:hover { border-color: var(--blue); color: var(--txt-dim); }
.res.on { border-color: var(--blue); color: var(--blue-txt); }
.res.locked { cursor: not-allowed; opacity: .9; }

.svg-opts { margin-top: 12px; }
.note { font-size: 10px; color: var(--txt-mute); line-height: 1.5; margin: 6px 0 0; }

/* ---------- background / compose ---------- */
.bg-shapes { display: flex; gap: 6px; margin-bottom: 10px; }
.shape {
  flex: 1; text-align: center; font-size: 11px; padding: 5px 0;
  border: 1px solid var(--line-2); color: var(--txt-dim);
  background: none; font-family: inherit; cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}
.shape:hover { border-color: var(--blue); }
.shape.active { border-color: var(--blue); color: var(--blue-txt); background: var(--blue-bg); }

.palette { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.swatch {
  width: 22px; height: 22px; border: 1px solid var(--line-2); cursor: pointer; padding: 0;
  background-clip: padding-box;
}
.swatch:hover { border-color: var(--blue); }
.swatch.active { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue) inset; }
.swatch.transparent {
  background: repeating-conic-gradient(var(--checker-1) 0% 25%, var(--checker-2) 0% 50%) 0/8px 8px;
  position: relative;
}
.custom-color {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--txt-dim); margin-bottom: 12px; cursor: pointer;
}
.custom-color input[type="color"] {
  width: 26px; height: 22px; padding: 0; border: 1px solid var(--line-2);
  background: none; cursor: pointer;
}

.slider-row { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--txt-dim); margin-bottom: 8px; }
.slider-row span:first-child { width: 30px; }
.slider-row input[type="range"] { flex: 1; accent-color: var(--blue); }
.slider-out { width: 34px; text-align: right; color: var(--txt); }

.compose-wrap { margin: 4px 0 4px; text-align: center; }
.compose-prev {
  width: 128px; height: 128px; cursor: move; touch-action: none;
  border: 1px solid var(--line-2);
  background: repeating-conic-gradient(var(--checker-1) 0% 25%, var(--checker-2) 0% 50%) 0/12px 12px;
}
.compose-hint { font-size: 10px; color: var(--txt-mute); margin-top: 5px; }

.preview-cta { border-color: var(--blue); color: var(--blue-txt); background: var(--blue-bg); }
.preview-cta:hover:not(:disabled) { background: rgba(92,157,255,0.22); }

/* ---------- preview panel ---------- */
.preview-panel {
  margin-top: 1px; background: var(--bg-panel);
  border: 1px solid var(--line); border-radius: 8px; padding: 14px;
}
.pv-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (max-width: 720px) { .pv-cols { grid-template-columns: 1fr; } }
.pv-col { padding: 14px; }
.pv-light { background: #f4f6f9; }
.pv-dark  { background: #14181f; }
.pv-head { font-size: 11px; letter-spacing: 1px; margin-bottom: 12px; }
.pv-light .pv-head { color: #6f7d8f; }
.pv-dark .pv-head { color: #8b97a8; }
.pv-samples { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; }
.pv-tile { text-align: center; }
.pv-tile canvas { display: block; image-rendering: auto; }
.pv-tile .cap { font-size: 10px; margin-top: 5px; }
.pv-light .cap { color: #6f7d8f; }
.pv-dark .cap { color: #8b97a8; }

/* ---------- preview ---------- */
.preview-row { display: flex; align-items: center; gap: 10px; }
.prev { background: repeating-conic-gradient(var(--checker-1) 0% 25%, var(--checker-2) 0% 50%) 0/10px 10px; image-rendering: pixelated; border: 1px solid var(--line-2); }
.preview-hint { font-size: 10px; color: var(--txt-mute); }

/* ---------- export ---------- */
.export-btn {
  width: 100%; margin-top: 18px; padding: 9px 0;
  border: 1px solid var(--orange); color: var(--orange); background: var(--orange-bg);
  font-family: inherit; font-size: 12px; letter-spacing: 1px; cursor: pointer;
  transition: background .12s;
}
.export-btn:hover:not(:disabled) { background: rgba(255,140,59,0.18); }
.export-btn:disabled { border-color: var(--line-2); color: var(--txt-mute); background: none; cursor: not-allowed; }
.export-meta { font-size: 10px; color: var(--txt-mute); margin-top: 8px; text-align: center; }

/* ---------- snippet ---------- */
.snippet-panel {
  margin-top: 1px; background: var(--bg-panel);
  border: 1px solid var(--line); border-radius: 8px; padding: 14px;
}
.snippet {
  margin: 0; padding: 12px; background: var(--snippet-bg); border: 1px solid var(--line);
  color: var(--txt-dim); font-size: 11px; line-height: 1.6; overflow-x: auto;
  white-space: pre; font-family: var(--mono);
}

.hidden { display: none !important; }