/* Paleta de comandos (Ctrl + K) */
.topbar-search {
  display: flex; align-items: center; gap: 8px; height: 36px; width: 280px; max-width: 34vw;
  padding: 0 8px 0 12px; border-radius: 12px; font-size: 14px; color: rgb(115 115 115);
  background: rgb(0 0 0 / .04); border: 1px solid transparent; transition: background-color .2s, border-color .2s;
}
.topbar-search:hover { background: rgb(0 0 0 / .06); border-color: rgb(0 0 0 / .06); }
.dark .topbar-search { background: rgb(255 255 255 / .05); color: rgb(163 163 163); }
.dark .topbar-search:hover { background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .06); }
.topbar-search kbd, .cmdk-kbd, .cmdk-foot kbd {
  font-family: inherit; font-size: 11px; line-height: 1; padding: 3px 5px; border-radius: 5px;
  background: #fff; border: 1px solid rgb(0 0 0 / .1); color: rgb(115 115 115); white-space: nowrap;
}
.dark .topbar-search kbd, .dark .cmdk-kbd, .dark .cmdk-foot kbd { background: rgb(255 255 255 / .06); border-color: rgb(255 255 255 / .1); color: rgb(163 163 163); }
@media (max-width: 767px) {
  .topbar-search { width: 36px; padding: 0; justify-content: center; background: transparent; }
  .topbar-search span, .topbar-search kbd { display: none; }
}

.cmdk { position: fixed; inset: 0; z-index: 90; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; }
.cmdk[hidden] { display: none; }
.cmdk-backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / .35); opacity: 0; transition: opacity .15s; }
.cmdk-dialog {
  position: relative; width: 100%; max-width: 640px; max-height: min(560px, 76vh);
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border-radius: 18px; border: 1px solid rgb(0 0 0 / .08);
  box-shadow: 0 24px 64px rgb(0 0 0 / .22);
  opacity: 0; transform: translateY(-8px) scale(.98); transition: opacity .15s, transform .15s;
}
.cmdk.open .cmdk-backdrop { opacity: 1; }
.cmdk.open .cmdk-dialog { opacity: 1; transform: none; }
.dark .cmdk-dialog { background: #212121; border-color: rgb(255 255 255 / .08); }

.cmdk-input { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid rgb(0 0 0 / .06); }
.dark .cmdk-input { border-color: rgb(255 255 255 / .06); }
.cmdk-input input { flex: 1; min-width: 0; background: transparent; font-size: 16px; outline: none; }
.cmdk-input input::placeholder { color: rgb(163 163 163); }

.cmdk-list { flex: 1; overflow-y: auto; padding: 6px; }
.cmdk-group { padding: 10px 10px 4px; font-size: 11px; font-weight: 500; color: rgb(115 115 115); }
.cmdk-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; font-size: 14px; cursor: pointer; }
.cmdk-item[aria-selected="true"] { background: rgb(0 0 0 / .05); }
.dark .cmdk-item[aria-selected="true"] { background: rgb(255 255 255 / .07); }
.cmdk-ic { display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px; background: rgb(0 0 0 / .04); color: rgb(82 82 82); }
.dark .cmdk-ic { background: rgb(255 255 255 / .06); color: rgb(212 212 212); }
.cmdk-hint { margin-left: 8px; font-size: 12px; color: rgb(140 140 140); }
.cmdk-enter { color: rgb(163 163 163); visibility: hidden; }
.cmdk-item[aria-selected="true"] .cmdk-enter { visibility: visible; }
.cmdk-empty { padding: 32px 16px; text-align: center; font-size: 14px; color: rgb(115 115 115); }

.cmdk-foot {
  display: flex; align-items: center; gap: 14px; padding: 9px 14px; font-size: 12px; color: rgb(115 115 115);
  border-top: 1px solid rgb(0 0 0 / .06); background: rgb(0 0 0 / .015);
}
.dark .cmdk-foot { border-color: rgb(255 255 255 / .06); background: rgb(255 255 255 / .02); }
.cmdk-foot kbd { margin-right: 3px; }
@media (max-width: 640px) {
  .cmdk { padding-top: 16px; }
  .cmdk-foot span:not([data-cmdk-client]) { display: none; }
}
