/* ==============================
   ProwessApps Debug Practice CSS
================================= */

.debug-task-box {
  background: #fff5f5;
  border-left: 4px solid #dc3545;
  border-radius: 10px;
  padding: 12px;
}

.debug-hint-box {
  background: #fff8e1;
  border: 1px solid #ffe08a;
  border-left: 4px solid #ffc107;
  border-radius: 10px;
  padding: 12px;
}

.debug-solution-box {
  background: #f8fff9;
  border: 1px solid #cfead6;
  border-left: 4px solid #198754;
  border-radius: 10px;
  padding: 12px;
}

.debug-explanation-box {
  background: #f3f7ff;
  border: 1px solid #d7e5ff;
  border-left: 4px solid #0d6efd;
  border-radius: 10px;
  padding: 12px;
}

.debug-code-box pre,
.debug-solution-box pre {
  background: #111827;
  color: #f8f9fa;
  border-radius: 8px;
  padding: 12px;
  overflow-x: auto;
  font-size: 0.86rem;
  line-height: 1.45;
}

.debug-code-box code,
.debug-solution-box code {
  color: #f8f9fa;
}

.debug-error-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #dc3545;
}

/* ==============================
   Debug Editor Box
================================= */

.debug-editor-box {
  background: #ffffff;
  border: 1px solid #f1c2c7;
  border-left: 4px solid #dc3545;
  border-radius: 12px;
  padding: 12px;
}

.debug-editor-box .compiler-box {
  border: 1px solid #ddd;
  border-radius: 14px;
  overflow: hidden;
  background: #111;
}

.debug-editor-box .editor-frame {
  width: 100%;
  min-height: 560px;
  border: 0;
  display: block;
}

@media (max-width: 991.98px) {
  .debug-editor-box .editor-frame {
    min-height: 520px;
  }
}
.language-code-card code {
  font-size: 0.88rem;
  line-height: 1.55;
  white-space: pre;
}

/* Do not force one color on Prism token spans */
.language-code-card code .token {
  font-size: inherit;
}