:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #0d1117; color: #e6edf3; }
* { box-sizing: border-box; }
body { margin: 0; }
header { display:flex; gap:24px; align-items:center; padding:16px 24px; border-bottom:1px solid #30363d; background:#010409; }
header span { color:#8b949e; font-size:14px; }
a { color:#58a6ff; text-decoration:none; }
.brand { color:#fff; font-weight:700; font-size:20px; }
main { max-width:1500px; margin:0 auto; padding:28px 20px 80px; }
h1,h2,h3 { margin-top:0; }
.hero { margin-bottom:28px; }
.hero p,.muted,small { color:#8b949e; }
.grid.two { display:grid; grid-template-columns:minmax(0,1.8fr) minmax(340px,.75fr); gap:24px; align-items:start; }
.card { display:block; color:inherit; background:#161b22; border:1px solid #30363d; border-radius:10px; padding:18px; margin-bottom:14px; }
.scenario:hover { border-color:#58a6ff; }
.scenario > div,.row,.skill > div:first-child,.attempt-row { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.badge,.status { border:1px solid #30363d; border-radius:999px; padding:3px 8px; font-size:12px; }
.status.running { color:#d29922; }.status.passed { color:#3fb950; }.status.error,.status.failed { color:#f85149; }
.task { white-space:pre-line; background:#0d1117; border-left:3px solid #58a6ff; padding:14px; margin:18px 0; }
label { display:block; color:#8b949e; margin:12px 0; }
select,input,textarea { width:100%; margin-top:6px; padding:10px; background:#0d1117; color:#e6edf3; border:1px solid #30363d; border-radius:6px; }
button { background:#238636; color:white; border:1px solid rgba(240,246,252,.1); border-radius:6px; padding:10px 14px; cursor:pointer; font-weight:600; }
button.secondary { background:#21262d; } button.danger { background:#8b1a1a; }
.actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.terminal-command { margin:8px 0; } .terminal-command code { display:block; overflow:auto; background:#010409; padding:10px; margin-top:5px; border-radius:6px; }
.skill { margin-bottom:15px; } .bar { height:7px; background:#21262d; border-radius:9px; overflow:hidden; margin:6px 0; } .bar i { display:block; height:100%; background:#238636; }
.attempt-row { padding:9px 0; border-bottom:1px solid #21262d; }
.check { padding:10px 0; border-bottom:1px solid #30363d; }.check.ok strong { color:#3fb950; }.check.bad strong { color:#f85149; }
pre { white-space:pre-wrap; background:#010409; padding:10px; overflow:auto; }
.hint { padding:10px; background:#1b2430; border-left:3px solid #d29922; margin:8px 0; }.event { color:#8b949e; padding:6px 0; }
.theory { white-space:pre-line; line-height:1.55; }
@media (max-width:800px){ .grid.two{grid-template-columns:1fr} header span{display:none} }

.browser-terminal {
  margin-top: 16px;
  overflow: hidden;
  background: #010409;
  border: 1px solid #30363d;
  border-radius: 8px;
}
.terminal-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  padding: 6px 9px;
  background: #0d1117;
  border-bottom: 1px solid #30363d;
}
.terminal-nodes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
button.terminal-node {
  padding: 5px 10px;
  background: #21262d;
  color: #c9d1d9;
  border-color: #30363d;
  font-size: 12px;
}
button.terminal-node:hover,
button.terminal-node.active {
  background: #30363d;
  border-color: #58a6ff;
  color: #fff;
}
.terminal-status {
  color: #8b949e;
  font-size: 12px;
  white-space: nowrap;
}
.terminal-status[data-state="connected"] { color: #3fb950; }
.terminal-status[data-state="error"] { color: #f85149; }
#browser-terminal-screen {
  height: 500px;
  padding: 8px;
  background: #010409;
}
#browser-terminal-screen .xterm {
  height: 100%;
}
.terminal-note {
  margin-top: 7px;
  font-size: 12px;
}

button[disabled] {
  opacity: .6;
  cursor: wait;
}

/* Attempt workspace v2: compact task area + full-width terminal */
.attempt-page {
  width: 100%;
}

.attempt-page .back-link {
  display: inline-block;
  margin-bottom: 10px;
}

.workspace-card {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 16px;
}

.workspace-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px 12px;
}

.workspace-titlebar h1 {
  margin: 0;
}

.workspace-top {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(360px, .8fr);
  gap: 18px;
  padding: 0 20px 20px;
}

.task-pane {
  min-width: 0;
}

.task-pane .task {
  margin: 0 0 14px;
}

.manual-access {
  margin-top: 10px;
  background: #0d1117;
  border: 1px solid #21262d;
  border-radius: 7px;
}

.manual-access summary {
  cursor: pointer;
  color: #8b949e;
  padding: 9px 11px;
  font-size: 13px;
  user-select: none;
}

.manual-access-body {
  padding: 0 11px 10px;
}

.manual-access .terminal-command code {
  font-size: 12px;
}

.side-console {
  min-width: 0;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 8px;
  overflow: hidden;
  min-height: 220px;
}

.side-tabs {
  display: flex;
  gap: 2px;
  padding: 6px;
  border-bottom: 1px solid #30363d;
  background: #010409;
}

button.side-tab {
  flex: 1;
  padding: 8px 10px;
  background: transparent;
  border: 1px solid transparent;
  color: #8b949e;
  font-size: 13px;
}

button.side-tab:hover {
  color: #e6edf3;
  background: #161b22;
}

button.side-tab.active {
  color: #fff;
  background: #21262d;
  border-color: #30363d;
}

.side-tab-panel {
  display: none;
  max-height: 310px;
  overflow: auto;
  padding: 14px;
}

.side-tab-panel.active {
  display: block;
}

.side-tab-panel h2 {
  font-size: 17px;
  margin-bottom: 12px;
}

.side-tab-panel .theory {
  margin: 0;
}

.side-tab-panel .hint:first-child,
.side-tab-panel .event:first-child {
  margin-top: 0;
}

.terminal-shell {
  width: 100%;
  margin-top: 0;
  margin-bottom: 16px;
  border-radius: 10px;
}

.terminal-toolbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.terminal-help {
  color: #6e7681;
  font-size: 12px;
}

#browser-terminal-screen {
  height: clamp(500px, 58vh, 760px);
  padding: 10px;
}

.debrief-card {
  margin-top: 16px;
}

@media (max-width: 1050px) {
  .workspace-top {
    grid-template-columns: 1fr;
  }

  .side-tab-panel {
    max-height: 260px;
  }

  .terminal-help {
    display: none;
  }
}

@media (max-width: 700px) {
  .workspace-titlebar,
  .workspace-top {
    padding-left: 12px;
    padding-right: 12px;
  }

  .workspace-titlebar {
    align-items: flex-start;
  }

  .side-tabs {
    overflow-x: auto;
  }

  button.side-tab {
    min-width: 100px;
  }

  #browser-terminal-screen {
    height: 62vh;
    min-height: 420px;
  }
}


/* Attempt workspace v3: one viewport, terminal owns remaining space */
body.attempt-running {
  height: 100vh;
  overflow: hidden;
}

body.attempt-running main {
  height: calc(100vh - 57px);
  max-width: 1500px;
  padding-top: 18px;
  padding-bottom: 14px;
  overflow: hidden;
}

body.attempt-running .attempt-page {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

body.attempt-running .back-link {
  flex: 0 0 auto;
}

body.attempt-running .workspace-card {
  flex: 0 0 auto;
  margin-bottom: 14px;
}

body.attempt-running .terminal-shell {
  flex: 1 1 auto;
  min-height: 0;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body.attempt-running .terminal-toolbar {
  flex: 0 0 auto;
}

body.attempt-running #browser-terminal-screen {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  padding: 8px 10px 10px;
  overflow: hidden;
}

body.attempt-running #browser-terminal-screen .xterm {
  height: 100%;
}

body.attempt-running #browser-terminal-screen .xterm-viewport {
  overflow-y: scroll !important;
}

@media (max-height: 760px) {
  body.attempt-running main {
    padding-top: 10px;
    padding-bottom: 8px;
  }

  body.attempt-running .workspace-titlebar {
    padding-top: 12px;
    padding-bottom: 8px;
  }

  body.attempt-running .workspace-top {
    padding-bottom: 12px;
  }

  body.attempt-running .task-pane .task {
    margin-bottom: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  body.attempt-running .actions {
    margin-top: 10px;
  }
}

/* Scenario launch progress overlay */
.launch-overlay[hidden] {
  display: none;
}

.launch-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(1, 4, 9, .72);
  backdrop-filter: blur(5px);
}

.launch-dialog {
  width: min(430px, calc(100vw - 32px));
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 18px 55px rgba(0, 0, 0, .42);
}

.launch-dialog h2 {
  margin: 8px 0 4px;
  text-align: center;
}

.launch-subtitle,
.launch-note {
  text-align: center;
}

.launch-note {
  margin: 18px 0 0;
  font-size: 12px;
}

.launch-spinner {
  width: 34px;
  height: 34px;
  margin: 0 auto;
  border: 3px solid #30363d;
  border-top-color: #58a6ff;
  border-radius: 50%;
  animation: launch-spin .85s linear infinite;
}

.launch-steps {
  display: grid;
  gap: 9px;
  margin-top: 20px;
}

.launch-step {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #6e7681;
  transition: color .18s ease;
}

.launch-step-icon {
  width: 18px;
  text-align: center;
  font-weight: 700;
}

.launch-step.active {
  color: #e6edf3;
}

.launch-step.active .launch-step-icon {
  color: #d29922;
}

.launch-step.done {
  color: #8b949e;
}

.launch-step.done .launch-step-icon {
  color: #3fb950;
}

body.launch-overlay-open {
  overflow: hidden;
}

@keyframes launch-spin {
  to { transform: rotate(360deg); }
}