:root {
  color-scheme: dark;
  --bg: #070b10;
  --panel: #0d141c;
  --line: #253341;
  --text: #d6dee7;
  --muted: #83909d;
  --accent: #d5aa55;
  --green: #55c889;
  --red: #ef6b73;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: radial-gradient(circle at top, #14202b 0, var(--bg) 48%);
  color: var(--text);
  font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
}

.client { display: grid; grid-template-rows: auto 1fr auto; height: 100dvh; }
.topbar {
  align-items: center; background: rgba(7, 11, 16, .88); border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; padding: .75rem clamp(1rem, 3vw, 2rem);
}
h1 { color: var(--accent); font: 700 1.1rem/1 Georgia, serif; letter-spacing: .22em; margin: 0; }
.topbar p { color: var(--muted); font-size: .7rem; letter-spacing: .12em; margin: .3rem 0 0; text-transform: uppercase; }
.connection { align-items: center; display: flex; font-size: .8rem; gap: .6rem; }
.status-dot { background: var(--muted); border-radius: 50%; height: .55rem; width: .55rem; }
.status-dot.connected { background: var(--green); box-shadow: 0 0 .7rem var(--green); }
.status-dot.error { background: var(--red); }
button {
  background: #18232e; border: 1px solid #344758; border-radius: 3px; color: var(--text);
  cursor: pointer; font: inherit; padding: .45rem .8rem;
}
button:hover:not(:disabled) { border-color: var(--accent); color: #fff; }
button:disabled { cursor: default; opacity: .45; }
.terminal {
  min-height: 0; overflow-y: auto; padding: 1.25rem clamp(1rem, 3vw, 2rem); white-space: pre-wrap;
  overflow-wrap: anywhere; font-size: clamp(.8rem, 1.5vw, .95rem); line-height: 1.35; scrollbar-color: #334555 transparent;
}
.system { color: var(--muted); font-style: italic; }
.system.error { color: var(--red); }
.ansi-blink { animation: ansi-blink 1s steps(1, end) infinite; }
@keyframes ansi-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ansi-blink { animation: none; } }
.mxp-link { cursor: pointer; }
.mxp-link:hover, .mxp-link:focus { background: rgba(213, 170, 85, .18); outline: none; }
.command-bar {
  align-items: center; background: var(--panel); border-top: 1px solid var(--line); display: flex;
  gap: .75rem; padding: .75rem clamp(1rem, 3vw, 2rem) max(.75rem, env(safe-area-inset-bottom));
}
.command-bar > span { color: var(--accent); font-weight: bold; }
.command-bar input {
  background: transparent; border: 0; color: #fff; flex: 1; font: inherit; min-width: 0; outline: none; padding: .55rem 0;
}
.command-bar input::placeholder { color: #596675; }
.sr-only { height: 1px; margin: -1px; overflow: hidden; position: absolute; width: 1px; clip: rect(0, 0, 0, 0); }

@media (max-width: 520px) {
  #status-text { display: none; }
  .command-bar button { display: none; }
}