/* Designer page: builds on /site.css tokens */
.designer { max-width: 1160px; margin: 0 auto; padding: 8px 16px 64px; }
.designer h1 {
  font-weight: 900; font-style: italic; text-transform: uppercase;
  font-size: clamp(1.9rem, 5vw, 3rem); color: var(--silver-hi); margin: 12px 0 8px;
}
.intro { margin-bottom: 24px; max-width: 62ch; }
.small { font-size: 0.88rem; }

.workspace { display: grid; gap: 28px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .workspace { grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); } }

/* preview */
.stage-wrap { position: sticky; top: 12px; }
@media (max-width: 899px) { .stage-wrap { position: static; } }
.stage-box { position: relative; margin: 0 auto; }
.binder-art { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 14px 30px rgb(0 0 0 / 0.55)); }
.area { position: absolute; outline: 1.5px dashed rgb(255 255 255 / 0.45); outline-offset: 0; }
.area.light { outline-color: rgb(0 0 0 / 0.35); }
.hint { color: var(--text-soft); font-size: 0.88rem; margin: 14px 0 8px; text-align: center; }

.layer-tools { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.layer-tools button, .add-row button, .file-btn {
  font: 600 0.9rem var(--body); color: var(--text); background: var(--slate-2);
  border: 1px solid var(--line); border-radius: 6px; padding: 9px 14px; cursor: pointer;
}
.layer-tools button:hover, .add-row button:hover, .file-btn:hover { border-color: var(--emerald); }
.layer-tools .danger-link { color: #ff8a8a; }

/* controls */
.panel { display: grid; gap: 18px; }
.step { background: var(--slate-2); border: 1px solid var(--line); border-radius: 8px; padding: 18px; display: grid; gap: 12px; }
.step h2 { font-weight: 900; font-style: italic; text-transform: uppercase; font-size: 1.15rem; color: var(--silver-hi); margin: 0; }
.step label { display: grid; gap: 6px; font-weight: 500; font-size: 0.95rem; }
.step input, .step select, .step textarea {
  font: inherit; color: var(--text); background: var(--slate);
  border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; width: 100%;
}
.step input:focus, .step select:focus, .step textarea:focus { outline: none; border-color: var(--emerald); box-shadow: 0 0 0 3px rgb(80 200 120 / 0.2); }
.step .button { justify-self: start; border: 0; cursor: pointer; }
.step .button:disabled { opacity: 0.6; cursor: wait; }

.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch {
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer; padding: 0;
  border: 2px solid var(--line); box-shadow: inset 0 0 0 2px var(--slate-2);
}
.swatch[aria-checked="true"] { border-color: var(--emerald); box-shadow: inset 0 0 0 2px var(--slate-2), 0 0 0 2px rgb(0 255 65 / 0.35); }
.note {
  margin: 0; font-size: 0.88rem; color: var(--text);
  border-left: 3px solid var(--emerald); padding: 8px 12px; background: rgb(80 200 120 / 0.07); border-radius: 0 6px 6px 0;
}
.add-row { display: flex; gap: 10px; flex-wrap: wrap; }
.text-editor { display: grid; gap: 10px; padding-top: 6px; border-top: 1px solid var(--line); }
label.check { display: flex !important; align-items: flex-start; gap: 10px; font-weight: 400; }
label.check input { width: auto; margin-top: 3px; }
.field-row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-msg { margin: 0; min-height: 1.4em; }
.form-msg.ok { color: var(--emerald); }
.form-msg.err { color: #ff8a8a; }

/* front / back switcher */
.side-tabs { display: flex; justify-content: center; gap: 6px; margin-bottom: 14px; }
.side-tabs button {
  font: 800 0.85rem var(--display); text-transform: uppercase; letter-spacing: 0.04em;
  padding: 9px 18px; border-radius: 6px; cursor: pointer;
  background: var(--slate-2); color: var(--text-soft); border: 1px solid var(--line);
}
.side-tabs button[aria-pressed="true"] { background: var(--emerald); color: #0d1f14; border-color: var(--emerald); }
.area canvas { display: block; }

[hidden], label.check[hidden] { display: none !important; }

/* crystal designer */
.crystal .binder-art { filter: drop-shadow(0 18px 40px rgb(0 0 0 / 0.7)) drop-shadow(0 0 24px rgb(160 210 255 / 0.10)); }
.crystal .area { outline-color: rgb(255 255 255 / 0.28); }
.smart-btn {
  justify-self: start; font: 600 0.9rem var(--body); color: var(--text); background: var(--slate);
  border: 1px solid var(--emerald); border-radius: 6px; padding: 9px 14px; cursor: pointer;
}
.smart-btn:disabled { opacity: 0.7; cursor: wait; }
.step input[type=range] { padding: 0; accent-color: var(--emerald); }

/* crystal 3D mode */
.stage-3d { position: relative; border-radius: 8px; overflow: hidden; background: #111315; min-height: 320px; }
.stage-3d canvas { display: block; width: 100%; touch-action: none; }
.empty-3d { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 24px; text-align: center; color: var(--text-soft); pointer-events: none; }
.tools { display: grid; gap: 12px; }
.status-line { margin: 0; color: var(--emerald); font-size: 0.9rem; }
.danger-link-btn { justify-self: start; background: none; border: 0; color: #ff8a8a; cursor: pointer; padding: 0; font: 500 0.9rem var(--body); }

.service-preview { position: absolute; inset: 0; display: flex; flex-wrap: wrap; gap: 10px; align-content: center; justify-content: center; padding: 20px; }
.service-preview img { width: 30%; max-width: 160px; aspect-ratio: 1; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }
.service-preview p { width: 100%; text-align: center; color: var(--text-soft); margin: 0 0 6px; }
#mode-tabs { flex-wrap: wrap; }

/* wood & slate: product tiles */
.product-tiles { display: grid; gap: 14px; }
.tile-group h3 { margin: 0 0 8px; font: 800 0.8rem var(--display); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-soft); }
.tiles { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.tile {
  display: grid; gap: 4px; justify-items: center; text-align: center; cursor: pointer;
  background: var(--slate); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 10px 8px;
  font: 600 0.82rem var(--body);
}
.tile svg { width: 100%; height: 64px; }
.tile small { color: var(--text-soft); font-weight: 400; font-size: 0.75rem; }
.tile:hover { border-color: var(--emerald); }
.tile[aria-pressed="true"] { border-color: var(--emerald); box-shadow: 0 0 0 2px rgb(80 200 120 / 0.35); }
.finish-row { display: grid; gap: 10px; }
.finish-tabs { justify-content: flex-start; margin: 0; }
.board-size { display: flex; flex-wrap: wrap; gap: 10px 18px; }
/* maker's logo marker + our own binder photo */
.logo-mark { position: absolute; z-index: 5; pointer-events: none; display: grid; place-items: center; text-align: center;
  background: rgb(160 160 165 / 0.55); border: 1px dashed rgb(255 255 255 / 0.7); border-radius: 3px; color: #fff;
  font: 600 11px/1.1 var(--body, Inter, sans-serif); text-shadow: 0 1px 2px rgb(0 0 0 / 0.5); }
.logo-mark[hidden] { display: none; }
.binder-photo { margin: 10px 0; }
.binder-photo img { width: 100%; max-width: 280px; border-radius: 10px; border: 1px solid var(--line, #333); }