/* TUI / system24-ish. No rounded corners anywhere. Tweak the vars. */
:root {
  --bg: #1a1414;
  --fg: #e9e2e0;
  --dim: #8a7f7d;
  --accent: #d52b1e;     /* canada red */
  --panel: #231b1b;
  --font: "IBM Plex Mono", "Cascadia Mono", Consolas, monospace;
}
* { box-sizing: border-box; border-radius: 0 !important; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.5 var(--font);
  display: grid;
  place-items: center;
}

.corner-img {
  position: fixed;
  left: 0;
  bottom: 0;
  max-width: 30vw;
  max-height: 40vh;
  pointer-events: none;
}

.term {
  width: min(420px, 92vw);
  border: 2px solid var(--fg);
  background: var(--panel);
  box-shadow: 6px 6px 0 var(--accent);
}
.term-bar {
  display: flex;
  justify-content: space-between;
  background: var(--fg);
  color: var(--bg);
  padding: 2px 8px;
  font-weight: bold;
}
.panel { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.panel[hidden] { display: none; }
.prompt { margin: 0 0 6px; }
.prompt::before { content: "> "; color: var(--accent); }
.err { color: var(--accent); margin: 0; }

.btn {
  display: block;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  color: var(--fg);
  border: 2px solid var(--fg);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover, .btn:focus-visible { background: var(--fg); color: var(--bg); outline: none; }
.btn-back { border-color: var(--dim); color: var(--dim); }

.login { display: flex; flex-direction: column; gap: 10px; }
.login input {
  padding: 8px 10px;
  background: var(--bg);
  color: var(--fg);
  border: 2px solid var(--dim);
  font: inherit;
}
.login input:focus { border-color: var(--accent); outline: none; }