:root {
  color-scheme: dark;
  --bg: #070b09;
  --panel: #0d1411;
  --panel2: #111b17;
  --text: #d8f5e5;
  --muted: #81998b;
  --line: #23352b;
  --green: #51ff9c;
  --green2: #19c86d;
  --amber: #ffd166;
  --red: #ff5d73;
  --cyan: #6ee7ff;
  --shadow: 0 24px 60px rgba(0,0,0,.38);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 78% 10%, rgba(81,255,156,.07), transparent 25rem),
    radial-gradient(circle at 5% 80%, rgba(110,231,255,.05), transparent 28rem),
    var(--bg);
}
button, input { font: inherit; }
button { cursor: pointer; }

.scanlines {
  position: fixed; inset: 0; pointer-events: none; z-index: 50; opacity: .12;
  background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(0,0,0,.35) 4px);
  mix-blend-mode: multiply;
}

.topbar {
  max-width: 1500px; margin: 0 auto; padding: 28px 28px 10px;
  display: flex; align-items: end; justify-content: space-between; gap: 24px;
}
.eyebrow { margin: 0 0 6px; color: var(--green2); font-size: .72rem; letter-spacing: .18em; font-weight: 800; }
h1 { margin: 0; font-size: clamp(2.4rem, 6vw, 5rem); line-height: .82; letter-spacing: -.08em; }
h1 span { color: var(--green); text-shadow: 0 0 24px rgba(81,255,156,.28); }
.tagline { color: var(--muted); margin: 12px 0 0; font-size: .84rem; }
.top-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: end; }

main { max-width: 1500px; margin: 0 auto; padding: 18px 28px 48px; }
.status-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; margin-bottom: 10px; }
.stat {
  min-width: 0; padding: 13px 14px; border: 1px solid var(--line); background: rgba(13,20,17,.86); box-shadow: inset 0 1px rgba(255,255,255,.025);
}
.stat span { display: block; color: var(--muted); font-size: .63rem; letter-spacing: .1em; margin-bottom: 5px; }
.stat strong { font-size: 1.15rem; color: var(--green); }
.stat small { color: var(--muted); margin-left: 4px; font-size: .7rem; }
.stat.wide { grid-column: span 2; }
.stat.wide small { display: block; margin: 4px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.workspace { display: grid; grid-template-columns: minmax(320px, .82fr) minmax(420px, 1.3fr); grid-template-rows: auto auto; gap: 10px; }
.panel { border: 1px solid var(--line); background: linear-gradient(180deg, rgba(15,24,20,.96), rgba(9,14,12,.96)); box-shadow: var(--shadow); }
.ticket-panel { padding: 22px; grid-row: 1 / span 2; }
.terminal-panel { min-height: 380px; display: flex; flex-direction: column; }
.tools-panel { padding: 18px; }
.panel-head { display: flex; justify-content: space-between; align-items: start; gap: 14px; }
.panel-head.compact { margin-bottom: 4px; }
.panel h2 { margin: 4px 0 0; font-size: 1.3rem; line-height: 1.15; }
.ticket-id { color: var(--cyan); font-size: .78rem; }
.severity { border: 1px solid currentColor; color: var(--amber); padding: 5px 8px; font-size: .72rem; font-weight: 900; }
.severity.p1 { color: var(--red); }
.severity.p3 { color: var(--cyan); }
.ticket-meta { display: flex; flex-wrap: wrap; gap: 7px; margin: 18px 0; }
.ticket-meta span { background: var(--panel2); border: 1px solid var(--line); padding: 6px 8px; color: var(--muted); font-size: .72rem; }
blockquote { margin: 18px 0; padding: 16px 18px; border-left: 3px solid var(--green2); background: rgba(81,255,156,.035); line-height: 1.6; color: #e7fff0; }
.objective { margin-top: 22px; padding-top: 16px; border-top: 1px dashed var(--line); }
.objective span { color: var(--muted); font-size: .7rem; }
.objective p { margin: 7px 0 0; line-height: 1.5; }
.incident-footer { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 28px; }
.incident-footer div { padding: 10px; background: var(--panel2); border: 1px solid var(--line); }
.incident-footer span { display: block; color: var(--muted); font-size: .62rem; }
.incident-footer strong { display: block; margin-top: 5px; color: var(--green); }

.terminal-titlebar { display: flex; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .72rem; background: #09100c; }
.lights { display: flex; gap: 5px; }
.lights i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.lights i:nth-child(1){background:var(--red)} .lights i:nth-child(2){background:var(--amber)} .lights i:nth-child(3){background:var(--green2)}
.terminal-output { flex: 1; padding: 16px; overflow: auto; font-size: .79rem; line-height: 1.55; white-space: pre-wrap; color: #bdfbd1; min-height: 300px; max-height: 430px; }
.terminal-output .dim { color: var(--muted); }
.terminal-output .error { color: var(--red); }
.terminal-output .info { color: var(--cyan); }
.terminal-input-row { border-top: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 10px 12px; background: #080d0a; }
.terminal-input-row label { color: var(--green); }
.terminal-input-row input { min-width: 0; color: var(--text); background: transparent; border: 0; outline: 0; caret-color: var(--green); }
.terminal-input-row button { border: 1px solid var(--line); background: var(--panel2); color: var(--green); padding: 7px 10px; }

.tools-hint { color: var(--muted); font-size: .74rem; line-height: 1.5; margin: 8px 0 12px; }
.action-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.action-btn { text-align: left; min-height: 58px; padding: 11px 12px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); transition: .12s ease; }
.action-btn:hover { border-color: var(--green2); transform: translateY(-1px); }
.action-btn strong { display: block; font-size: .78rem; margin-bottom: 4px; }
.action-btn small { color: var(--muted); font-size: .65rem; }
.action-btn.solution { border-color: #31533f; }
.action-btn.catastrophic { border-color: rgba(255,93,115,.55); }
.action-btn.catastrophic strong { color: var(--red); }
.divider { display: flex; align-items: center; gap: 8px; margin: 14px 0 9px; color: var(--muted); font-size: .65rem; }
.divider:before,.divider:after { content:""; height:1px; flex:1; background:var(--line); }

button.ghost, button.primary { border: 1px solid var(--line); color: var(--text); background: transparent; padding: 9px 12px; }
button.ghost:hover { border-color: var(--green2); color: var(--green); }
button.danger:hover { border-color: var(--red); color: var(--red); }
button.primary { background: var(--green); color: #041108; border-color: var(--green); font-weight: 900; }
button.primary:hover { filter: brightness(1.06); }

 dialog { width: min(680px, calc(100vw - 28px)); color: var(--text); border: 1px solid var(--green2); background: #0b120e; box-shadow: 0 30px 100px rgba(0,0,0,.7); padding: 0; }
dialog::backdrop { background: rgba(0,0,0,.76); backdrop-filter: blur(4px); }
.modal-content { padding: 26px; }
.modal-content h2 { margin: 6px 0 12px; font-size: 1.6rem; }
.modal-content p { line-height: 1.55; color: #cbe8d5; }
.result-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 18px 0; }
.result-stats div { padding: 12px; border: 1px solid var(--line); background: var(--panel2); }
.result-stats span { display: block; color: var(--muted); font-size: .65rem; }
.result-stats strong { display:block; margin-top:5px; color:var(--green); }
.help-copy code { color: var(--cyan); }

@media (max-width: 1050px) {
  .status-grid { grid-template-columns: repeat(4,1fr); }
  .stat.wide { grid-column: span 2; }
  .workspace { grid-template-columns: 1fr; }
  .ticket-panel { grid-row: auto; }
}
@media (max-width: 650px) {
  .topbar { padding: 22px 16px 8px; align-items: start; flex-direction: column; }
  main { padding: 12px 16px 30px; }
  .status-grid { grid-template-columns: repeat(2,1fr); }
  .workspace { grid-template-columns: minmax(0,1fr); }
  .action-list { grid-template-columns: 1fr; }
  .incident-footer, .result-stats { grid-template-columns: 1fr; }
  .terminal-output { min-height: 260px; }
}

.intervention-btn { width: 100%; min-height: 48px; }
.intervention-hint { margin-top: 9px; }
.modal-close { width: 100%; margin-top: 14px; }
.kb-copy { max-height: min(78vh, 760px); overflow: auto; }
.kb-copy details { border-top: 1px solid var(--line); padding: 10px 0; }
.kb-copy summary { cursor: pointer; font-weight: 700; color: var(--green); }
.kb-copy details p { margin: 8px 0 0; }
.kb-copy code { white-space: normal; overflow-wrap: anywhere; }

/* Dual-shell terminal */
.terminal-titlebar { align-items: center; gap: 10px; }
.terminal-titlebar > span { flex: 1 1 auto; }
.terminal-mode-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.shell-mode-btn { border: 0; border-right: 1px solid var(--line); background: #07100b; color: var(--muted); padding: 4px 9px; font: inherit; font-size: .68rem; font-weight: 800; cursor: pointer; }
.shell-mode-btn:last-child { border-right: 0; }
.shell-mode-btn:hover { color: var(--green); }
.shell-mode-btn.active { color: #041108; background: var(--green); }
#terminalPrompt { min-width: 50px; white-space: nowrap; }

.infra-pre {
  white-space: pre-wrap;
  overflow-x: auto;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  background: rgba(0,0,0,.28);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  line-height: 1.55;
}
