:root {
  --bg: #f4f5f7;
  --panel: #ffffff;
  --ink: #1c1e21;
  --muted: #6b7280;
  --accent: #2563eb;
  --border: #e2e5ea;
  --radius: 12px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
}

header { padding: 20px 28px 6px; }
header h1 { margin: 0; font-size: 22px; }
.warn { margin: 6px 0 0; color: #dc2626; font-weight: 700; font-size: 14px; }
header .sub { margin: 4px 0 0; color: var(--muted); font-size: 13px; }

main {
  display: grid;
  grid-template-columns: minmax(320px, 420px) 1fr;
  gap: 20px;
  padding: 18px 28px 40px;
  align-items: start;
}
@media (max-width: 860px) { main { grid-template-columns: 1fr; } }

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
}

.elem { padding: 14px 0; border-bottom: 1px solid var(--border); }
.elem:last-child { border-bottom: none; }
.elem h2 { margin: 0 0 10px; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.num {
  display: inline-flex; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 12px;
  align-items: center; justify-content: center;
}

.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

button {
  font: inherit; padding: 9px 16px; border-radius: 8px;
  border: 1px solid var(--border); background: #fff; cursor: pointer;
}
button:hover:not(:disabled) { background: #f0f2f5; }
button:disabled { opacity: 0.45; cursor: not-allowed; }
#modeSelect {
  font: inherit; padding: 9px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: #fff; cursor: pointer;
}
#generateBtn { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
#uploadBtn, #cameraBtn { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
#generateBtn:hover:not(:disabled) { background: #1d4fd7; }

#sourcePreview {
  margin-top: 12px; max-width: 100%; max-height: 300px;
  border-radius: 8px; border: 1px solid var(--border); display: block;
}
/* display:block above would override the hidden attribute -> broken-image icon */
#sourcePreview[hidden] { display: none; }

#cameraBox video { width: 100%; max-height: 300px; background: #000; border-radius: 8px; margin-bottom: 8px; }

/* custom HSV color picker — identical on every device (native pickers differ) */
.picker { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.svWrap { position: relative; }
#svField {
  width: 100%; height: 150px; display: block;
  border: 1px solid var(--border); border-radius: 8px;
  touch-action: none; cursor: crosshair;
}
.svMarker {
  position: absolute; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 0 3px rgba(0, 0, 0, .6);
  transform: translate(-50%, -50%); pointer-events: none;
}
#hueSlider {
  width: 100%; height: 22px; border-radius: 8px; border: 1px solid var(--border);
  -webkit-appearance: none; appearance: none; cursor: pointer; touch-action: none;
  background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}
#hueSlider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; border: 2px solid #999; box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
#hueSlider::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff; border: 2px solid #999; box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

#hexInput {
  font: 14px ui-monospace, monospace; width: 110px; height: 46px; padding: 10px;
  border: 1px solid var(--border); border-radius: 8px; text-transform: uppercase;
}
#hexInput.invalid { border-color: #dc2626; }
.swatch { flex: 1; min-width: 40px; height: 46px; border-radius: 8px; border: 1px solid var(--border); background: transparent; }
.hint { color: var(--muted); font-size: 12px; margin: 8px 0 0; }

.status { color: var(--muted); font-size: 13px; }
.status.error { color: #dc2626; font-weight: 700; }

.resultPanel h2 { margin: 0 0 12px; font-size: 15px; display: flex; align-items: center; gap: 8px; }
#downloadBtn { margin-top: 12px; font-weight: 600; }
.resultBox {
  position: relative;
  min-height: 320px; display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--border); border-radius: 8px; overflow: hidden; background: #fafbfc;
}
.spinner {
  position: absolute; top: 50%; left: 50%; width: 52px; height: 52px; margin: -26px;
  border: 5px solid rgba(0, 0, 0, .12); border-top-color: var(--accent);
  border-radius: 50%; animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.resultBox .placeholder { color: var(--muted); }
.resultBox img { max-width: 100%; max-height: 70vh; display: block; }

/* gallery (element 5) */
.galleryPanel { grid-column: 1 / -1; }
.galleryPanel h2 { margin: 0 0 12px; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.galleryBar { margin-bottom: 12px; }
.galleryGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
}
.shot {
  position: relative; border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden; background: #fff;
}
.shot img { width: 100%; height: 110px; object-fit: cover; display: block; }
.shot input[type="checkbox"] {
  position: absolute; top: 6px; left: 6px; width: 18px; height: 18px;
  z-index: 2; accent-color: var(--accent); cursor: pointer;
}
.shotDel {
  position: absolute; top: 4px; right: 4px; z-index: 2;
  width: 26px; height: 26px; padding: 0; border-radius: 6px;
  background: rgba(255, 255, 255, 0.92); color: #dc2626;
  font-weight: 700; line-height: 1;
}
.shotMeta {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--muted); padding: 6px;
}
.shotMeta .dot {
  width: 12px; height: 12px; border-radius: 50%;
  border: 1px solid var(--border); flex: none;
}
#galleryEmpty { margin-top: 8px; }
.shot img { cursor: pointer; }

/* overlay viewer */
.overlay {
  position: fixed; inset: 0; z-index: 100; background: rgba(10, 12, 16, 0.92);
  display: flex; flex-direction: column; padding: 10px 12px 14px;
}
.overlay[hidden] { display: none; }
.ovTop { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ovInfo { color: #e5e7eb; font-size: 13px; display: flex; align-items: center; gap: 8px; }
.ovInfo .dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid #666; flex: none; }
.ovTop button, .ovNav {
  background: rgba(255, 255, 255, 0.12); color: #fff; border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.ovTop button { width: 36px; height: 36px; font-size: 16px; line-height: 1; }
.ovMain { position: relative; flex: 1; min-height: 0; display: flex; margin: 8px 0; }
.ovTrack {
  display: flex; overflow-x: auto; overflow-y: hidden; width: 100%; height: 100%;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
}
.ovTrack::-webkit-scrollbar { display: none; }
.ovSlide { flex: 0 0 100%; display: flex; align-items: center; justify-content: center; scroll-snap-align: center; }
.ovSlide img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ovNav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 64px;
  font-size: 26px; line-height: 1;
}
#ovPrev { left: 6px; } #ovNext { right: 6px; }
.ovDownload {
  align-self: center; margin: 2px 0 10px; background: var(--accent); color: #fff;
  border: none; font-weight: 600; padding: 10px 26px;
}
.ovThumbs {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: thin;
}
.ovThumbs img {
  flex: 0 0 auto; width: 72px; height: 72px; object-fit: cover; border-radius: 6px;
  border: 2px solid transparent; cursor: pointer; opacity: 0.65;
}
.ovThumbs img.active { border-color: var(--accent); opacity: 1; }