.command-surface[data-open="false"] {
  display: none;
}

.command-surface[data-open="true"] {
  display: block;
}

.command-surface[data-open="true"] .command-surface-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(5, 8, 20, 0.52);
  backdrop-filter: blur(10px);
}

.command-surface[data-open="true"] .command-surface-panel {
  position: fixed;
  z-index: 101;
  top: min(18vh, 170px);
  left: 50%;
  width: min(640px, calc(100vw - 32px));
  max-height: min(518px, 72vh);
  overflow: hidden;
  transform: translateX(-50%);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  background: rgba(248, 251, 255, 0.88);
  box-shadow: 0 30px 100px -35px rgba(10, 16, 45, 0.72);
  backdrop-filter: blur(26px) saturate(145%);
  animation: command-enter 180ms var(--ease-frost);
}

.command-row[hidden],
.command-group-header[hidden] {
  display: none;
}

.local-form-status {
  margin-top: 12px;
  color: var(--success);
  font-size: 14px;
}

.local-mobile-sheet {
  position: fixed;
  inset: 72px 16px auto;
  z-index: 90;
  display: grid;
  gap: 6px;
  padding: 16px;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  background: rgba(248, 251, 255, 0.94);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(24px);
}

.local-mobile-backdrop {
  position: fixed;
  inset: 0;
  z-index: 89;
  background: rgba(5, 8, 20, 0.28);
  backdrop-filter: blur(5px);
}

.local-mobile-sheet a {
  padding: 12px;
  border-radius: 8px;
  color: var(--fg-primary);
}

@keyframes command-enter {
  from { opacity: 0; transform: translate(-50%, 10px) scale(0.985); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .command-surface[data-open="true"] .command-surface-panel {
    animation: none;
  }
}