:root {
  --control-foreground: oklch(0.99 0 0);
  --control-primary: oklch(0.54 0.24 263);
  --control-neon: oklch(0.78 0.14 230);
  --control-edge: oklch(0.37 0.16 263);
  --control-surface: oklch(0.19 0.035 255 / 92%);
  --control-border: oklch(0.78 0.14 230 / 45%);
  --control-glow: oklch(0.78 0.14 230 / 32%);
  --control-glow-hover: oklch(0.78 0.14 230 / 65%);
  --control-highlight: oklch(0.99 0 0 / 32%);
  --control-shadow: oklch(0.08 0 0 / 55%);
  --control-gradient: linear-gradient(145deg, var(--control-primary), var(--control-neon));
  --control-raised-shadow: inset 0 1px 0 var(--control-highlight), 0 4px 0 var(--control-edge), 0 8px 18px var(--control-shadow), 0 0 18px var(--control-glow);
  --control-hover-shadow: inset 0 1px 0 var(--control-highlight), 0 6px 0 var(--control-edge), 0 12px 24px var(--control-shadow), 0 0 28px var(--control-glow-hover), 0 0 48px var(--control-glow);
}
html { scroll-behavior: smooth; scroll-padding-top: 130px; }
.mova-control {
  position: relative;
  color: var(--control-foreground) !important;
  background: var(--control-surface) !important;
  border: 1px solid var(--control-border) !important;
  box-shadow: var(--control-raised-shadow) !important;
  transition: translate 180ms ease, box-shadow 180ms ease, filter 180ms ease, border-color 180ms ease;
  cursor: pointer;
  letter-spacing: 0 !important;
  -webkit-tap-highlight-color: transparent;
}
.mova-control--primary { background: var(--control-gradient) !important; }
.mova-control--icon { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; padding: 0 !important; }
.mova-control:focus-visible, a:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid var(--control-neon);
  outline-offset: 5px;
}
@media (hover: hover) {
  .mova-control:hover:not(:disabled) {
    translate: 0 -2px;
    filter: brightness(1.18);
    border-color: var(--control-neon) !important;
    box-shadow: var(--control-hover-shadow) !important;
  }
  .mova-nav:hover { color: var(--control-neon) !important; text-shadow: 0 0 14px var(--control-glow-hover); }
}
.mova-control:active:not(:disabled) {
  translate: 0 3px;
  box-shadow: inset 0 1px 0 var(--control-highlight), 0 1px 0 var(--control-edge), 0 0 24px var(--control-glow-hover) !important;
}
.mova-control:disabled { opacity: .65; cursor: wait; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mova-control { transition: none; }
  .mova-control:hover, .mova-control:active { translate: none; }
}