/* ── In-browser IDE (code pad, playground, challenges) ───────── */
.ide-card { padding: 0 !important; overflow: hidden; }
.ide { display: flex; flex-direction: column; min-height: 640px; background: #0b1220; color: #e2e8f0; border-radius: 14px; border: 1px solid rgba(255,255,255,0.1); }
.ide-toolbar { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.6rem 0.8rem; border-bottom: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); }
.ide-toolbar .form-control { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.14) !important; color: #f1f5f9 !important; font-size: 0.82rem; padding: 0.35rem 0.55rem; height: auto; }
.ide-field { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: #94a3b8; margin: 0; }
.ide-field select { min-width: 190px; }
.ide-title { max-width: 220px; font-weight: 600; }
.ide-spacer { flex: 1; }
.ide-hint { font-size: 0.72rem; color: #a8b8cc; white-space: normal; }
.ide-projects { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.6rem 0.8rem; border-bottom: 1px solid rgba(255,255,255,0.08); background: rgba(48,200,214,0.05); font-size: 0.82rem; }
.ide-project { display: flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0.5rem; border-radius: 8px; background: rgba(255,255,255,0.04); }
.ide-project i { color: #30C8D6; width: 1.1rem; text-align: center; }
.ide-project-title { font-weight: 600; }
.ide-project small { color: #94a3b8; flex: 1; }
.ide-pkgrow { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.8rem; border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 0.78rem; color: #94a3b8; }
.ide-pkgrow label { margin: 0; white-space: nowrap; }
.ide-pkgrow .form-control { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.14) !important; color: #f1f5f9 !important; font-size: 0.8rem; padding: 0.3rem 0.55rem; height: auto; font-family: Menlo, Consolas, monospace; }
.ide-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); flex: 1; min-height: 0; }
.ide-editor-pane, .ide-output-pane { display: flex; flex-direction: column; min-width: 0; min-height: 420px; }
.ide-editor-pane { border-right: 1px solid rgba(255,255,255,0.08); }
.ide-tabs { display: flex; gap: 2px; padding: 0.35rem 0.5rem 0; background: rgba(0,0,0,0.25); overflow-x: auto; }
.ide-tab { border: 0; background: transparent; color: #94a3b8; font: 600 0.76rem/1 Menlo, Consolas, monospace; padding: 0.5rem 0.8rem; border-radius: 8px 8px 0 0; cursor: pointer; white-space: nowrap; }
.ide-tab.active { background: #282a36; color: #f8f8f2; }
.ide-editor { flex: 1; min-height: 380px; }
.ide-editor .CodeMirror { height: 100%; min-height: 380px; font-size: 0.86rem; font-family: Menlo, Consolas, 'Monaco', monospace; }
.ide-server { display: grid; grid-template-columns: auto 1fr 1.2fr auto; gap: 0.4rem; padding: 0.5rem 0.6rem; border-bottom: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); align-items: center; }
.ide-server .form-control { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.14) !important; color: #f1f5f9 !important; font-size: 0.78rem; padding: 0.3rem 0.5rem; height: auto; font-family: Menlo, Consolas, monospace; }
.ide-server textarea { grid-column: 1 / -1; resize: vertical; }
.ide-out-tabs { display: flex; align-items: center; gap: 0.2rem; padding: 0.3rem 0.5rem; background: rgba(0,0,0,0.25); border-bottom: 1px solid rgba(255,255,255,0.08); }
.ide-out-tab { border: 0; background: transparent; color: #94a3b8; font-size: 0.76rem; font-weight: 700; padding: 0.4rem 0.7rem; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem; }
.ide-out-tab.active { background: rgba(48,200,214,0.15); color: #7DD4DC; }
.ide-badge { background: #30C8D6; color: #05070d; border-radius: 999px; font-size: 0.62rem; padding: 0 0.4rem; line-height: 1.4; }
.ide-status { margin-left: auto; font-size: 0.72rem; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; }
.ide-status.ok { color: #34d399; }
.ide-status.err { color: #f87171; }
.ide-preview { flex: 1; width: 100%; min-height: 380px; border: 0; background: #fff; }
.ide-console { flex: 1; margin: 0; padding: 0.6rem 0.75rem; overflow: auto; font: 0.8rem/1.5 Menlo, Consolas, monospace; background: #0b1220; color: #e2e8f0; white-space: pre-wrap; word-break: break-word; min-height: 380px; }
.ide-line { padding: 1px 0; border-bottom: 1px dotted rgba(255,255,255,0.05); }
.ide-line.ide-error { color: #f87171; }
.ide-line.ide-warn { color: #fbbf24; }
.ide-line.ide-ok { color: #34d399; }
.ide-line.ide-dim { color: #a8b8cc; }
.ide-explain { padding: 0.9rem 1rem; border-top: 1px solid rgba(255,255,255,0.08); font-size: 0.88rem; line-height: 1.6; white-space: pre-wrap; background: rgba(48,200,214,0.05); }
.btn-xs { font-size: 0.7rem; padding: 0.2rem 0.55rem; }
@media (max-width: 991.98px) {
  .ide-body { grid-template-columns: 1fr; }
  .ide-editor-pane { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .ide-editor, .ide-editor .CodeMirror, .ide-preview, .ide-console { min-height: 300px; }
  .ide-title { max-width: 100%; flex: 1 1 100%; }
  .ide-server { grid-template-columns: auto 1fr; }
  .ide-server input:nth-of-type(2) { grid-column: 1 / -1; }
}

/* ── Quiz code questions & project groups ─────────────────── */
.quiz-code-editor .CodeMirror { height: 220px; font-size: 0.84rem; }
.grp-list .grp-card:hover { border-color: rgba(48,200,214,0.4); }
@media (max-width: 767.98px) {
  .grp-columns { grid-template-columns: 1fr !important; }
}