:root { --centos: #7a1b4f; --terminal: #141619; }
html, body { min-height: 100%; }
body { min-height: 100vh; background: #f6f4f5; color: #25212a; }
.app-shell { min-height: 100vh; display: flex; }
.app-layout { flex: 1; min-height: 0; }
.app-layout > section, .side-panel { display: flex; min-height: 0; }
.terminal { display: flex; flex-direction: column; flex: 1; overflow: hidden; border-radius: 10px; background: var(--terminal); color: #e9e9e9; font-family: Consolas, "Cascadia Code", monospace; min-height: 0; }
.terminal-bar { padding: 10px 14px; background: #292d31; color: #b9b9b9; font: 13px system-ui; }
.dot { display: inline-block; width: 11px; height: 11px; margin-right: 5px; border-radius: 50%; }.red{background:#ef6461}.yellow{background:#f5bd4f}.green{background:#61c454}
.terminal-body { flex: 1; min-height: 0; padding: 18px 18px 0; overflow-y: auto; white-space: pre-wrap; font-size: .92rem; line-height: 1.55; }
.command { color: #f5bd4f; }.command-line { display: flex; gap: 8px; padding: 12px 18px 18px; color: #7ee787; }.command-line input { flex: 1; border: 0; outline: 0; background: transparent; color: white; font: inherit; min-width: 0; }
code { color: var(--centos); } .btn-outline-danger { --bs-btn-color: var(--centos); --bs-btn-border-color: var(--centos); --bs-btn-hover-bg: var(--centos); }
@media (min-width: 992px) {
  .app-layout { height: calc(100vh - 3rem); }
  .side-panel { flex-direction: column; }
  .side-panel .card:first-child { flex: 1; }
}
@media (max-width: 991.98px) {
  .app-shell { min-height: 100dvh; }
  .terminal { min-height: 65dvh; }
}