/* Base reset + shared components (switcher, photo placeholders, wifi copy).
   Each design layers its own look on top via its own <style>. */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }
a { color: inherit; }

/* ---- design switcher (dev-only bar, same everywhere) ---------------------- */
.switcher {
  position: sticky; top: 0; z-index: 999;
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px;
  background: #111; color: #fff;
  font-size: 12px; overflow-x: auto; white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.switcher-label { opacity: .6; margin-right: 2px; flex: none; }
.switcher-btn {
  flex: none;
  padding: 6px 10px; border-radius: 999px;
  background: #2a2a2a; color: #eee; text-decoration: none;
  font-weight: 600;
}
.switcher-btn.active { background: #fff; color: #111; }

/* ---- photo placeholder (shared) ------------------------------------------ */
.photo { margin: 0; }
.photo img { border-radius: 12px; width: 100%; height: auto; }
.photo-ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  aspect-ratio: 4 / 3;
  border: 2px dashed currentColor;
  border-radius: 12px;
  opacity: .45;
  padding: 16px; text-align: center;
}
.photo-ph-icon { font-size: 28px; }
.photo-ph-label { font-size: 13px; font-weight: 600; }
.photo figcaption { font-size: 13px; opacity: .7; margin-top: 6px; text-align: center; }

/* ---- wifi copy block (shared behavior; designs recolor) ------------------ */
.wifi-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0; }
.wifi-label { font-size: 13px; opacity: .6; }
.wifi-value { font-weight: 700; font-variant-numeric: tabular-nums; word-break: break-all; text-align: right; }
.wifi-pass { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.copy-btn {
  width: 100%; margin-top: 10px; padding: 12px;
  border: none; border-radius: 10px;
  font-weight: 700; font-size: 15px;
  background: #111; color: #fff;
  transition: background .15s;
}
.copy-btn.copied { background: #1a7f37; }
.wifi-note { font-size: 13px; opacity: .7; margin-top: 8px; }

/* utility */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}