:root {
  --bg: #0d1117;
  --panel: #161b22;
  --border: #30363d;
  --text: #c9d1d9;
  --muted: #8b949e;
  --accent: #58a6ff;
  --ok: #3fb950;
  --warn: #d29922;
  --err: #f85149;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100dvh;
}

.bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.25rem;
  padding: .6rem 1rem;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

.title { display: flex; align-items: center; gap: .4rem; }
.dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.red { background: #ff5f56; } .yellow { background: #ffbd2e; } .green { background: #27c93f; }
.title strong { margin-left: .4rem; }

.hint { color: var(--muted); flex: 1; min-width: 14rem; }
kbd {
  font: 12px ui-monospace, monospace;
  padding: 1px 5px;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
}

.status { font-size: 12px; padding: 2px 8px; border-radius: 999px; border: 1px solid currentColor; }
.status.connecting { color: var(--warn); }
.status.online { color: var(--ok); }
.status.offline { color: var(--err); }

#terminal {
  min-height: 0;
  padding: 8px;
  overflow: hidden;
}
#terminal .xterm { height: 100%; }

.keys {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom));
  background: var(--panel);
  border-top: 1px solid var(--border);
}

.keys button {
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .5rem .9rem;
  min-width: 5.5rem;
  cursor: pointer;
  touch-action: manipulation;
}
.keys button:hover { border-color: var(--accent); }
.keys button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.keys button.primary { border-color: var(--accent); color: var(--accent); }
#reconnect { border-color: var(--ok); color: var(--ok); }

@media (max-width: 600px) {
  .hint { display: none; }
  .keys button { min-width: 0; flex: 1 1 28%; padding: .6rem .4rem; }
}