* { box-sizing: border-box; }

body {
  margin: 16px;
  color: #111;
  background: #fff;
  font: 14px/1.4 monospace;
}

main {
  width: 100%;
  max-width: none;
}
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.panel-header h2 { margin: 0; }
h2 { margin: 0 0 6px; }
h3 { margin-bottom: 6px; }
p { margin: 5px 0 9px; }
fieldset { margin: 14px 0; padding: 10px 12px 12px; }
legend { font-weight: bold; }

label {
  display: block;
  margin: 8px 0;
}

label.inline {
  display: inline-block;
  margin-right: 16px;
}

input:not([type="checkbox"]):not([type="file"]), textarea {
  display: block;
  width: min(100%, 760px);
  margin-top: 3px;
  padding: 5px 6px;
  border: 1px solid #888;
  border-radius: 0;
  background: #fff;
  color: #111;
  font: inherit;
}

input[type="number"] { width: 150px !important; }
textarea { resize: vertical; }

button {
  margin: 4px 8px 4px 0;
  padding: 6px 12px;
  border: 1px solid #777;
  border-radius: 0;
  background: #eee;
  color: #111;
  font: inherit;
  cursor: pointer;
}

button:hover { background: #ddd; }
button:disabled { color: #777; cursor: wait; }
.actions { margin-top: 8px; }

.tabs {
  display: flex;
  gap: 4px;
  margin-top: 14px;
  border-bottom: 1px solid #777;
}

.tab-button {
  margin: 0 0 -1px;
  border-bottom-color: #777;
  background: #eee;
}

.tab-button.active {
  border-bottom-color: #fff;
  background: #fff;
  font-weight: bold;
}

.tab-panel fieldset { margin-top: 0; }

.fields-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
}

.configured, .state-ok { color: #06731e; }
.state-error { color: #b00020; }
.state-busy { color: #8a5700; }
.state-idle { color: #555; }
.message-ok { color: #06731e; }
.message-error { color: #b00020; }

progress {
  width: min(600px, 80%);
  height: 18px;
  vertical-align: middle;
}

table {
  margin: 10px 0;
  border-collapse: collapse;
}

th, td {
  padding: 5px 8px;
  border: 1px solid #999;
  text-align: left;
}

.stats td { text-align: right; }

#jobs {
  max-height: 180px;
  margin: 8px 0 0;
  padding-left: 0;
  overflow-y: auto;
  list-style: none;
}

#jobs li { padding: 2px 0; }
#jobs button {
  margin: 0;
  padding: 1px 3px;
  border: 0;
  background: transparent;
  text-align: left;
  text-decoration: none;
}
#jobs button:hover { text-decoration: underline; }
#jobs li.current button { font-weight: bold; }

#log {
  height: 260px;
  overflow: auto;
  padding: 8px;
  border: 1px solid #555;
  background: #111;
  color: #ddd;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.log-ok { color: #77d991; }
.log-error { color: #ff858e; }
.log-muted { color: #999; }

dialog {
  width: min(480px, calc(100% - 24px));
  border: 1px solid #555;
  padding: 18px;
}

dialog::backdrop { background: rgb(0 0 0 / 35%); }

.auth-page {
  display: grid;
  min-height: calc(100vh - 32px);
  place-items: center;
}

.auth-card {
  width: min(420px, 100%);
  padding: 22px;
  border: 1px solid #777;
}

.auth-card input { width: 100% !important; }

@media (max-width: 680px) {
  body { margin: 9px; }
  progress { width: 100%; }
  table { display: block; overflow-x: auto; }
  input:not([type="checkbox"]):not([type="file"]), textarea { width: 100%; }
}