/* Exact same puzzle silhouette as the Flutter app (12% inset, curved tabs). */
body,
.admin-body {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cpath d='M10.08 10.08H33.6C33.6-1.68 50.4-1.68 50.4 10.08H73.92V33.6C85.68 33.6 85.68 50.4 73.92 50.4V73.92H50.4C50.4 62.16 33.6 62.16 33.6 73.92H10.08V50.4C-1.68 50.4-1.68 33.6 10.08 33.6Z' fill='none' stroke='%23174a88' stroke-opacity='.12' stroke-width='2'/%3E%3C/svg%3E"),
    linear-gradient(135deg, #f2f7fc, #e6eff8);
  background-size: 84px 84px, auto;
}

.site-shell {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cpath d='M10.08 10.08H33.6C33.6-1.68 50.4-1.68 50.4 10.08H73.92V33.6C85.68 33.6 85.68 50.4 73.92 50.4V73.92H50.4C50.4 62.16 33.6 62.16 33.6 73.92H10.08V50.4C-1.68 50.4-1.68 33.6 10.08 33.6Z' fill='none' stroke='%23ffffff' stroke-opacity='.11' stroke-width='2'/%3E%3C/svg%3E"),
    radial-gradient(circle at 80% 10%, rgba(40,182,230,.46), transparent 32rem),
    linear-gradient(125deg, #102b67, #0b699d 58%, #071a43);
  background-size: 84px 84px, auto, auto;
}

.admin-body .button.ghost,
.admin-body a.button.ghost {
  color: #17335f;
  background: #fff;
  border-color: #f5c64d;
}

.editor-stage {
  touch-action: none;
  cursor: grab;
}
.editor-stage:active { cursor: grabbing; }
.editor-stage img {
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.piece-workspace {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 210px;
  gap: 1.1rem;
  align-items: center;
}
.piece-result { text-align: center; }
#piecePreview {
  width: 160px;
  height: 160px;
  background: #fff;
  filter: drop-shadow(0 8px 12px rgba(7,26,67,.25));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='white' d='M12 12H40C40-2 60-2 60 12H88V40C102 40 102 60 88 60V88H60C60 74 40 74 40 88H12V60C-2 60-2 40 12 40Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='white' d='M12 12H40C40-2 60-2 60 12H88V40C102 40 102 60 88 60V88H60C60 74 40 74 40 88H12V60C-2 60-2 40 12 40Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.piece-marker {
  width: 23%;
  height: 23%;
  border-radius: 0;
  touch-action: none;
}

.region-picker {
  padding: 1rem;
  border: 1px solid #c8d8e7;
  border-radius: 16px;
  background: #f6faff;
}
.region-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 1.25rem;
  align-items: center;
}
.nl-map path {
  fill: #d9e7f3;
  stroke: #fff;
  stroke-width: 4;
  cursor: pointer;
  transition: .15s ease;
}
.nl-map path:hover { fill: #91cff0; }
.nl-map path.selected { fill: #174a88; stroke: #f5c64d; }
.region-options { display: grid; gap: .45rem; }
.region-options label {
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: .55rem .7rem;
  background: #fff;
  border: 1px solid #dbe6f0;
  border-radius: 10px;
}
.region-options input { width: auto; }
.region-options small { color: #64748b; }
.advertiser-link { color: #174a88; }

@media (max-width: 760px) {
  .piece-workspace,
  .region-layout { grid-template-columns: 1fr; }
  .nl-map { width: min(220px, 100%); margin: auto; }
}