/* In-development placeholder — shown by tools that are announced in the nav
   (NEW badge) but not built yet, so the structure is visible without pretending
   the feature works.
   Tokens only, mirrors the app design system: no hardcoded hex, no inline
   style=, no emoji (inline SVG), radius from the scale, no left-accent stripes. */

.mvdev { max-width: 560px; margin: 40px auto; text-align: center; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 44px 32px; box-shadow: var(--shadow-sm); }

.mvdev-ic { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: var(--radius); background: var(--bg-2); border: 1px solid var(--border); color: var(--purple-bright); margin-bottom: 18px; }

.mvdev-t { font-family: var(--font-heading); font-size: 21px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); margin: 0 0 8px; }

.mvdev-d { font-size: 13.5px; line-height: 1.6; color: var(--text-3); margin: 0 auto 20px; max-width: 430px; }

.mvdev-badge { display: inline-flex; align-items: center; gap: 7px; font: 700 10px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--amber); border: 1px solid var(--amber); border-radius: var(--radius-pill); padding: 6px 14px; }

/* the pulsing dot reads as "work in progress" without needing a spinner */
.mvdev-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); animation: mvdevPulse 1.8s ease-in-out infinite; }
@keyframes mvdevPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .mvdev-dot { animation: none; } }

.mvdev-note { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--hairline); font-size: 12px; color: var(--muted); }