.console-panel {
  position: relative;
}

.console-form {
  position: relative;
}

.console-form:focus-within {
  border-color: var(--lime);
  box-shadow: 0 0 0 3px #b7ef3d18;
}

.console-form input:focus {
  box-shadow: none;
}

.command-suggestions {
  position: absolute;
  z-index: 20;
  left: 25px;
  right: 25px;
  margin-top: 4px;
  max-height: 330px;
  overflow: auto;
  background: #0b0e09;
  border: 1px solid #536146;
  box-shadow: 0 18px 45px #000c;
}

.command-suggestion {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 11px 13px;
  color: var(--text);
  text-align: left;
  letter-spacing: 0;
  background: transparent;
  border-bottom: 1px solid var(--line);
}

.command-suggestion:last-child { border-bottom: 0; }
.command-suggestion:hover,
.command-suggestion.selected {
  background: #20291b;
  filter: none;
  box-shadow: inset 3px 0 var(--lime);
}

.suggestion-main {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.suggestion-main code {
  color: var(--lime);
  font: 700 13px var(--mono);
}

.suggestion-main small {
  overflow: hidden;
  color: var(--muted);
  font: 11px/1.3 var(--sans);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suggestion-category {
  flex: none;
  padding: 4px 6px;
  color: #879878;
  font: 9px var(--mono);
  text-transform: uppercase;
  border: 1px solid var(--line);
}

.command-help {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 10px;
  color: var(--muted);
  font: 11px/1.45 var(--sans);
}

.command-help p { margin: 0; }
.command-help strong,
.command-help code { color: #c9d7bd; }
.command-help-key {
  padding: 4px 6px;
  color: var(--lime);
  font: 800 9px var(--mono);
  border: 1px solid #46543c;
}

.command-help kbd {
  padding: 1px 4px;
  color: var(--text);
  font: 10px var(--mono);
  background: #191f16;
  border: 1px solid var(--line);
}

@media (max-width: 850px) {
  .command-suggestions { left: 19px; right: 19px; }
  .suggestion-category { display: none; }
}