.log-panel {
  padding: 0;
  overflow: hidden;
}

.log-toolbar {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: #0b171b;
}

.log-toolbar label {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
}

.log-toolbar select,
.log-toolbar input[type="search"] {
  display: block;
  margin-top: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #071115;
  color: var(--text);
  padding: 9px 11px;
}

.log-toolbar select { min-width: 120px; }
.log-toolbar .log-search { flex: 1; }
.log-toolbar input[type="search"] { width: 100%; }
.log-toolbar .check { margin: 0 4px 9px 0; white-space: nowrap; }
.log-toolbar button { margin-bottom: 1px; }

.log-output {
  height: min(58vh, 620px);
  min-height: 320px;
  overflow: auto;
  padding: 12px 0;
  background: #050a0c;
  font: 12.5px/1.65 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  scrollbar-color: var(--line) #050a0c;
}

.log-line {
  padding: 2px 15px;
  border-left: 3px solid transparent;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #c9d4d6;
}

.log-line:nth-child(even) { background: #ffffff05; }
.log-line.warn { border-left-color: var(--amber); color: #ffe4a3; }
.log-line.error { border-left-color: var(--danger); background: #ff61700b; color: #ffabb3; }
.log-line.debug { color: #71868b; }
.log-line code { font: inherit; }
.log-panel > #log-message { padding: 24px 18px; margin: 0; }
.log-privacy { margin-top: 10px; font-size: .78rem; }

@media (max-width: 720px) {
  .log-toolbar { align-items: stretch; flex-wrap: wrap; }
  .log-toolbar .log-search { flex-basis: 100%; order: -1; }
  .log-toolbar .check { flex: 1; margin-top: 10px; }
  .log-output { min-height: 360px; }
  .log-toolbar button { width: 100%; }
}