@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap');
:root {
  --rc-base: #1e2936;
  --rc-base-ink: #0f1720;
  --rc-base-soft: #2a3948;
  --rc-base-tint: #d9e2ec;
  --rc-panel: #f4f7fa;
  --rc-panel-strong: #e7edf3;
  --rc-border: #46566a;
  --rc-border-soft: #c7d2de;
  --rc-accent: #cc6600;
  --rc-accent-strong: #b85600;
  --rc-accent-soft: #ffd9b3;
  --rc-success: #1d7f5f;
  --rc-warning: #cc6600;
  --rc-danger: #b42318;
  --rc-text: #0f1720;
  --rc-text-muted: #516173;
  --rc-highlight: #fff0db;
  --rc-shadow: 0 12px 30px rgba(15, 23, 32, 0.12);
  .accordion {
    --bs-accordion-active-bg: var(--rc-base);
    --bs-accordion-active-color: #f8f9fb;
    --bs-accordion-bg: var(--rc-panel);
    --bs-accordion-border-color: var(--rc-border);
    --bs-accordion-border-width: 2px;
    --bs-accordion-header-bg: var(--rc-base);
    --bs-accordion-header-color: #f8f9fb;
    --bs-accordion-header-hover-bg: var(--rc-base-soft);
    --bs-accordion-header-hover-color: #f8f9fb;
  }
}
.card-header {
  background-color: #cfd8e3;
  color: var(--rc-base);
}
body {
  font-family: 'Inter', sans-serif;
  color: var(--rc-text);
  background: radial-gradient(circle at top, #f9fbff 0%, #eef3f8 45%, #e6edf5 100%);
}
/* light-red    background: linear-gradient(45deg, #ffdbdb, #f9f9f9);
 * dark-green   background: linear-gradient(45deg, #90cf60, #d9d9d9);
 * light-yellow background: linear-gradient(45deg, #ffff60, #f9f9f9);
 */
.pgmaction input[type="submit"]:hover {
  background-color: #0056ad;
  color: #fff;
}
.pgmlist {
  border: 2px solid black;
  padding: 5px;
  margin: 10px;
}
.pgminfo {
  display: block;
  border: none;
  padding: 0;
  margin: 0 0 1rem 0;
  font-size: large;
  background: none;
}
span {
  font-weight: bold;
  padding: 2px;
}
.formtext {
  font-weight: bold;
  font-size: x-large;
  font-family: 'JetBrains Mono', monospace;
  padding: 2px;
  background: var(--rc-panel-strong);
  border: 1px solid var(--rc-border-soft);
  color: var(--rc-text);
}
.pgmaction {
  text-align: center;
  font-weight: bold;
  padding: 5px;
  background: var(--rc-panel);
}
.pgmaction input {
  background: #0066cc;
  color: #fff;
  font-weight: bold;
  font-size: large;
  padding: 5px;
  border: 1px solid #0056ad;
  border-radius: 5px;
  margin: 15px;
  cursor: pointer;
  box-shadow: var(--rc-shadow);
}

.output-mode-toggle {
  font-family: 'Inter', sans-serif;
  font-weight: bold;
  font-size: large;
}

.pgmraw-output pre {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  background: #0b121b;
  color: #b9f6ca;
  border-radius: 3px;
  padding: 10px;
}
.btn:not(.accordion-button),
button:not(.accordion-button),
input[type="submit"],
input[type="button"] {
  background: #0066cc;
  border-color: #0056ad;
  color: #fff;
}
.btn:not(.accordion-button):hover,
button:not(.accordion-button):hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  background: #0056ad;
  border-color: #004f9a;
  color: #fff;
}
.pgmform {
  border: 1px solid var(--rc-border);
  background: linear-gradient(145deg, #ffffff, var(--rc-panel));
  box-shadow: var(--rc-shadow);
}
.pgmoutput {
  border: 1px solid var(--rc-border);
  padding: 5px;
  font-size: large;
  font-family: 'JetBrains Mono', monospace;
  background: var(--rc-panel-strong);
}
.pgmoutput.highlight {
  background: var(--rc-highlight);
}
.pgmrun {
  font-size: small;
}
  
.pgmrun-line,
.pgmrun-json {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.2rem;
}

.pgmrun-json {
  margin-top: 1rem;
}
.pgmrun .pgmjsonbody {
  white-space: pre-wrap;
  font-family: 'JetBrains Mono', monospace;
  text-align: left;
  display: block;
  margin: 0 auto;
}
.pgmrun .formtext {
  font-size: small;
  width: fit-content;
  max-width: 100%;
  background: var(--rc-panel-strong);
}
.pgmrun .pgmjsonbody {
  white-space: pre-wrap;
  font-family: 'JetBrains Mono', monospace;
}
.pgmrun .formtext.highlight {
  background: var(--rc-highlight);
}
.formtext.pic-invalid {
  background-color: #ffe0d5;
  border-color: var(--rc-danger);
}
.pgmformat {
  font-family: 'JetBrains Mono', monospace;
}
.svval {
  font-family: 'JetBrains Mono', monospace;
}
.loading-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 8px;
}
.loading-spinner::after {
  content: "\21BB";
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.stats-item {
  margin: 10px 20px;
  padding: 10px;
}
.stats-value {
  font-size: 24px;
  font-weight: bold;
  color: var(--rc-base);
}
.stats-label {
  font-size: 12px;
  color: var(--rc-text-muted);
  margin-top: 5px;
}
.activity-graph {
  margin: 10px;
  padding: 10px;
  min-width: 800px;
}
.log-section {
  margin: 10px;
  padding: 10px;
}
.log-buttons {
  margin-bottom: 10px;
}
.log-buttons button {
  margin-right: 10px;
  padding: 5px 10px;
  cursor: pointer;
}
.log-output {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  background: #0b121b;
  color: #b9f6ca;
  padding: 10px;
  border-radius: 3px;
  max-height: 400px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.log-legend {
  font-family: 'JetBrains Mono', monospace;
}
.log-line {
  margin-bottom: 2px;
}
.log-ts {
  color: #93a4b8;
}
.log-sev {
  font-weight: 700;
}
.log-sev-dbg {
  color: #7dd3fc;
}
.log-sev-inf {
  color: #86efac;
}
.log-sev-wrn {
  color: #fdba74;
}
.log-sev-err {
  color: #fca5a5;
}
.log-sev-crt {
  color: #fda4af;
}
.log-sev-unk {
  color: #d1d5db;
}
.log-msg {
  color: #b9f6ca;
}
.wrapper-item {
  margin: 10px;
  padding: 10px;
  display: inline-block;
}
.wrapper-buttons {
  margin-top: 10px;
}
.wrapper-buttons button {
  margin-right: 5px;
  padding: 5px 10px;
  cursor: pointer;
}
.edit-section {
  margin: 10px;
  padding: 10px;
}
.edit-field {
  margin-bottom: 10px;
}
.edit-field label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}
.edit-field input,
.edit-field textarea,
.edit-field select {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--rc-border-soft);
  border-radius: 3px;
  font-family: 'JetBrains Mono', monospace;
  box-sizing: border-box;
  background: #fff;
}
.edit-field textarea {
  min-height: 150px;
  resize: vertical;
}
.edit-buttons {
  margin-top: 10px;
}
.edit-buttons button {
  margin-right: 10px;
  padding: 8px 15px;
  background: #0066cc;
  border: 1px solid #0056ad;
  color: #fff;
  border-radius: 3px;
  cursor: pointer;
  font-weight: bold;
}
.edit-buttons button:hover {
  background: #0056ad;
}
.edit-buttons button.danger {
  background: #0066cc;
}

.info-tooltip {
  cursor: help;
  font-size: 1rem;
}

.tooltip.tooltip-lg .tooltip-inner {
  max-width: 560px;
  font-size: 1rem;
  line-height: 1.4;
  padding: 0.65rem 0.85rem;
}
.edit-buttons button.danger:hover {
  background: #0056ad;
}
.message {
  padding: 10px;
  margin: 10px;
  border-radius: 3px;
  display: none;
}
.message.success {
  display: block;
  background: #d6f5ea;
  border: 1px solid #b8ead6;
  color: #0f5a46;
}
.message.error {
  display: block;
  background: #fde3de;
  border: 1px solid #f6c1b9;
  color: #7a1f15;
}
.form-control {
  font-family: 'JetBrains Mono', monospace;
}
.form-control::placeholder,
.formtext::placeholder {
  color: #9aa0a6;
  opacity: 1;
}
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 5px;
  user-select: none;
}
.section-header:hover {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 3px;
}
.section-header h1,
.section-header h2 {
  margin: 0;
  flex-grow: 1;
}
.page-logo {
  display: block;
  margin: 20px auto;
  width: 40%;
  max-width: 350px;
}
.rdh-header {
  font-family: "Inter";
  color: var(--rc-base);
  font-weight: bold;
}
.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.comparison-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 9999;
  overflow: auto;
}
.comparison-content {
  margin: 20px auto;
  max-width: 95%;
  background: white;
  padding: 20px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  max-height: 95vh;
}
.comparison-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--rc-border-soft);
  flex-shrink: 0;
}
.comparison-header h2 {
  font-family: "Inter";
  color: var(--rc-base);
  font-weight: bold;
  font-size: 2.5rem;
  margin: 0;
}
.comparison-close {
  font-size: 30px;
  cursor: pointer;
  font-weight: bold;
}
.comparison-close:hover {
  color: var(--rc-accent-strong);
}
.comparison-outputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px 20px;
  flex: 1;
  overflow: hidden;
}
.comparison-outputs > div {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.comparison-outputs > div:nth-child(3) {
  grid-column: 1 / -1;
  justify-self: center;
  width: 50%;
}
.comparison-outputs h3 {
  margin-top: 0;
  margin-bottom: 10px;
  color: #0066CC;
  flex-shrink: 0;
}
.comparison-outputs .pgmoutput {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.comparison-outputs .pgmoutput pre {
  margin: 0;
}
.btn-align {
  margin: 15px !important;
  vertical-align: top;
}