/* ============ v7: developer mode ============ */
.dev-fab { position: fixed; right: 14px; bottom: calc(176px + env(safe-area-inset-bottom)); z-index: 140; display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border: 0; border-radius: 99px;
  background: repeating-linear-gradient(135deg, #2a2410 0 10px, #33290f 10px 20px); color: #f0d38a; font: 700 13px var(--f-body, 'Space Grotesk'); letter-spacing: 0.02em; cursor: pointer;
  box-shadow: 0 0 0 1.5px rgba(240, 211, 138, 0.7), 0 12px 28px -8px rgba(0, 0, 0, 0.7); }
.dev-fab:active { transform: scale(0.94); }
.dev-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; font: 700 11px var(--f-mono, 'JetBrains Mono'); letter-spacing: 0.08em; text-transform: uppercase; color: #1a1508; background: linear-gradient(135deg, #f0d38a, #d8b25a); }
.dev-row { margin-top: 14px; padding-top: 14px; border-top: 1px dashed rgba(240, 211, 138, 0.35); }
.dev-ed { display: flex; flex-direction: column; gap: 12px; }
.dev-ed label { display: flex; flex-direction: column; gap: 6px; font: 600 13px var(--f-body, 'Space Grotesk'); color: var(--muted, rgba(239, 230, 210, 0.75)); }
.dev-ed textarea { resize: vertical; min-height: 96px; }
.dev-ed input[type=range] { accent-color: #d8b25a; }
.dev-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.dev-pin { border: 1px solid rgba(240, 211, 138, 0.25); border-radius: 16px; padding: 12px 14px 14px; margin: 0; }
.dev-pin legend { padding: 0 6px; font: 700 12px var(--f-mono, 'JetBrains Mono'); letter-spacing: 0.1em; text-transform: uppercase; color: #d8b25a; }
.dev-pinrow { font: 500 13px var(--f-mono, 'JetBrains Mono'); margin-bottom: 10px; color: var(--cream, #efe6d2); }
.dev-check { flex-direction: row !important; align-items: center; gap: 10px !important; margin-top: 10px; }
.dev-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.dev-actions .btn { flex: 1 1 auto; }
.dev-actions.sm { padding-top: 10px; border-top: 1px solid rgba(239, 230, 210, 0.08); }
.btn.danger { color: #ff9f8a; box-shadow: inset 0 0 0 1px rgba(224, 103, 79, 0.5); background: rgba(224, 103, 79, 0.08); }
.dev-log { display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow: auto; }
.dev-log > div { padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); }
.dev-sheet { max-height: 88vh; overflow-y: auto; }
.dev-ed [hidden] { display: none !important; }
@media (min-width: 761px) { .dev-fab { bottom: 28px; right: 28px; } }