#photo-zine, #hiking-poster {
  width: min(1080px, calc(100vw - 48px));
  max-height: calc(100dvh - 48px);
  padding: 24px;
  color: var(--space-ink);
  color-scheme: dark;
  background: var(--space-glass);
  border: 1px solid var(--space-line);
  border-radius: 14px;
  box-shadow: var(--space-shadow);
}
#photo-zine::backdrop, #hiking-poster::backdrop { background: #03070dbc; backdrop-filter: blur(6px); }
#hiking-poster { width: min(1120px, calc(100vw - 44px)); }
#poster-title { margin: 0; font: 700 29px/1.15 var(--serif); }
.poster-layout-switch { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--space-line); border-radius: 8px; }
.poster-layout-switch button { padding: 5px 9px; color: var(--space-muted); background: transparent; border: 0; border-radius: 5px; font-size: 13px; }
.poster-layout-switch button[aria-pressed="true"] { color: var(--space-ink); background: #83b6ff30; }
.poster-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(275px, 340px); align-items: start; gap: 22px; }
.poster-preview { display: grid; justify-items: center; background: #071728; border: 1px solid var(--space-line); padding: 12px; border-radius: 9px; }
.poster-preview svg { display: block; width: auto; max-width: 100%; height: min(70vh, 730px); }
.poster-form { display: grid; gap: 9px; max-height: min(74vh, 754px); overflow: auto; padding: 0 7px 8px 1px; }
.poster-form label { display: grid; gap: 4px; color: var(--space-muted); font-size: 12px; }
.poster-form :is(input,textarea) { min-width: 0; width: 100%; padding: 5px 7px; color: var(--space-ink); background: var(--space-fill); border: 1px solid var(--space-line); border-radius: 5px; }
.poster-form textarea { resize: vertical; }
.poster-form fieldset { min-width: 0; display: grid; gap: 7px; margin: 0; padding: 7px 9px; border: 1px solid var(--space-line); border-radius: 7px; }
.poster-form legend { color: var(--space-ink); font-size: 13px; }
.poster-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.poster-form .poster-privacy { display: flex; flex-wrap: wrap; gap: 7px 11px; }
.poster-privacy label { display: flex; align-items: center; }
.poster-form input[type="checkbox"] { width: auto; margin: 0; }
.poster-actions { display: flex; flex-wrap: wrap; gap: 6px; position: sticky; bottom: 0; padding: 5px 0; background: #0d253a; }
.poster-actions button { padding: 6px 8px; border: 1px solid var(--space-line); border-radius: 6px; background: var(--space-fill); color: var(--space-ink); }
.poster-status { margin: 0; color: var(--space-link); font-size: 12px; }
.poster-status:empty { display: none; }
.poster-track-note { margin: 0; font-size: 12px; color: var(--space-muted); }
.zine-header { display: flex; justify-content: space-between; align-items: start; gap: 16px; margin-bottom: 16px; }
.zine-header .eyebrow { margin: 0; color: var(--space-link); }
.zine-header h2 { margin: 4px 0; font: 700 34px/1.15 var(--serif); }
.zine-route { margin: 4px 0 0; color: var(--space-muted); font-size: 13px; }
.zine-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 255px; gap: 20px; }
.zine-preview {
  display: grid; justify-items: center; align-items: center; min-height: 275px;
  padding: 12px; background: #060b13; border: 1px solid var(--space-line); border-radius: 8px;
}
.zine-empty { text-align: center; color: var(--space-muted); font-size: 14px; }
.zine-stage {
  position: relative; margin: 0; width: min(100%, calc(59dvh * var(--zine-aspect, 1.5)));
  aspect-ratio: var(--zine-aspect, 1.5); overflow: hidden;
}
.zine-original { display: block; width: 100%; height: 100%; object-fit: contain; }
.zine-overlay { position: absolute; cursor: grab; touch-action: none; }
.zine-overlay:active { cursor: grabbing; }
.zine-overlay svg { display: block; width: 100%; height: auto; }
.zine-controls fieldset { display: grid; gap: 10px; min-width: 0; margin: 12px 0 0; padding: 0; border: 0; }
.zine-controls fieldset:disabled { opacity: .53; }
.zine-controls label { display: grid; gap: 5px; color: var(--space-muted); font-size: 12px; }
.zine-file input { width: 100%; }
.zine-controls :is(select, input[type="number"]) {
  min-width: 0; width: 100%; padding: 5px 7px; color: var(--space-ink); background: #0d1727;
  border: 1px solid var(--space-line); border-radius: 6px;
}
.zine-controls input[type="range"] { width: 100%; margin: 0; accent-color: #99c1f6; }
.zine-segment { display: grid; gap: 10px; }
.zine-controls details { padding: 7px 0; border-block: 1px solid var(--space-line); font-size: 12px; }
.zine-controls summary { cursor: pointer; color: var(--space-link); }
.zine-controls details p, .zine-location, .zine-status { margin: 6px 0 0; color: var(--space-muted); font-size: 12px; line-height: 1.45; }
.zine-coordinates, .zine-downloads { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.zine-controls button, .p-photo-zine, .browse-zine, .zine-file input::file-selector-button {
  padding: 7px 9px; color: var(--space-ink); background: var(--space-fill);
  border: 1px solid var(--space-line); border-radius: 6px; font-size: 12px; cursor: pointer;
}
.zine-controls button:hover, .p-photo-zine:hover, .browse-zine:hover { background: var(--space-hover); }
.zine-downloads button:first-child { border-color: #9fccff66; color: var(--space-link); }
.zine-file input::file-selector-button { margin-right: 8px; }
.p-photo-zine { margin-top: 12px; }
.browse-zine { margin: 0 0 14px; }