* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; background: #f4f6f9; color: #122033; }
header { height: 64px; background: linear-gradient(90deg,#002b5c,#004a98); color: white; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.brand { font-weight: 800; font-size: 20px; }
.sub { opacity: .82; font-size: 13px; }
main { display: grid; grid-template-columns: 390px 1fr; gap: 22px; padding: 22px; min-height: calc(100vh - 64px); }
.panel, .preview { background: white; border-radius: 16px; box-shadow: 0 8px 28px rgba(0,0,0,.08); }
.panel { padding: 18px; height: fit-content; }
.preview { padding: 18px; display:flex; align-items:center; justify-content:center; overflow:auto; min-height: 580px; }
label { display:block; margin: 14px 0 7px; font-weight: 800; color:#003478; font-size: 13px; text-transform: uppercase; letter-spacing: .02em; }
input, select { width:100%; padding: 12px 13px; border:1px solid #cfd7e3; border-radius: 10px; font-size: 15px; outline:none; background:white; }
input:focus, select:focus { border-color:#0057c8; box-shadow:0 0 0 3px rgba(0,87,200,.12); }
.hint { color:#697789; font-size: 12px; margin-top: 6px; }
.row { display:grid; grid-template-columns: 1fr; gap: 0; }
.sliderBox { margin-top: 16px; padding: 13px; background:#f7f9fc; border:1px solid #e1e7ef; border-radius: 12px; }
.sliderTitle { font-weight: 900; color:#122033; }
input[type="range"] { padding: 0; }
button { width:100%; border:0; border-radius: 12px; padding: 13px 14px; margin-top: 14px; cursor:pointer; font-size: 16px; font-weight: 900; }
.primary { color:white; background:#0057d9; }
.primary:hover { background:#0048b7; }
.secondary { color:#003478; background:#eaf1fb; border:1px solid #cdddf3; }
.secondary:hover { background:#dfeaf8; }
button:disabled { opacity:.6; cursor:not-allowed; }
.status { margin-top: 14px; padding: 12px; border-radius: 12px; font-size: 14px; display:none; }
.status.ok { display:block; color:#09622a; background:#eaf8ef; border:1px solid #bbe8c9; }
.status.error { display:block; color:#991b1b; background:#fff0f0; border:1px solid #ffd0d0; }
.status.info { display:block; color:#17406f; background:#ecf5ff; border:1px solid #cde5ff; }
.hidden { display:none !important; }
#placeholder { color:#718096; font-weight:700; }
canvas { max-width:100%; height:auto; border-radius: 10px; box-shadow:0 8px 20px rgba(0,0,0,.18); }
@media(max-width: 900px) { main { grid-template-columns: 1fr; } }

.photoGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 18px;
  max-height: 260px;
  overflow: auto;
  padding: 6px;
  border: 1px solid #d6dce8;
  border-radius: 12px;
  background: #f7f9fc;
}
.photoPick {
  appearance: none;
  border: 3px solid transparent;
  background: white;
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  cursor: pointer;
}
.photoPick img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.photoPick.selected {
  border-color: #003478;
  box-shadow: 0 0 0 2px rgba(0,52,120,.2);
}
.photoPick:focus-visible {
  outline: 3px solid #4a90e2;
  outline-offset: 2px;
}


.switchRow {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 13px;
  border: 1px solid #dbe4ef;
  border-radius: 12px;
  background: #f7f9fc;
  color: #003478;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.switch {
  margin: 0;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.switchTrack {
  width: 48px;
  height: 28px;
  border-radius: 999px;
  background: #c4cedb;
  position: relative;
  transition: .18s ease;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.switchTrack::after {
  content: "";
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #fff;
  position: absolute;
  top: 3px;
  left: 3px;
  transition: .18s ease;
  box-shadow: 0 2px 7px rgba(0,0,0,.24);
}
.switch input:checked + .switchTrack { background: #0057d9; }
.switch input:checked + .switchTrack::after { transform: translateX(20px); }
.muted { opacity: .48; }
.muted input { background: #eef2f7; }