:root {
  --bg: #1a1a1a;
  --fg: #c8c8c8;
  --dim: #666;
  --accent: #e8e8e8;
  --err: #cc6666;
  --ok: #8fbc6f;
  --warn: #d4a44e;
  --dead: #cc6666;
  --sel: #333;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #fafafa;
    --fg: #2a2a2a;
    --dim: #999;
    --accent: #111;
    --err: #b33;
    --ok: #397d2c;
    --warn: #a67c2e;
    --dead: #b33;
    --sel: #e0e0e0;
  }
}

[data-theme="dark"] {
  --bg: #1a1a1a;
  --fg: #c8c8c8;
  --dim: #666;
  --accent: #e8e8e8;
  --err: #cc6666;
  --ok: #8fbc6f;
  --warn: #d4a44e;
  --dead: #cc6666;
  --sel: #333;
}

[data-theme="light"] {
  --bg: #fafafa;
  --fg: #2a2a2a;
  --dim: #999;
  --accent: #111;
  --err: #b33;
  --ok: #397d2c;
  --warn: #a67c2e;
  --dead: #b33;
  --sel: #e0e0e0;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: "SF Mono", "Fira Code", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
  font-size: 14px;
  line-height: 1.5;
  height: 100vh;
  overflow: hidden;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  max-width: 80ch;
  margin: 0 auto;
  padding: 1ch;
}

#screen {
  flex: 1;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  outline: none;
}

#screen::-webkit-scrollbar { width: 4px; }
#screen::-webkit-scrollbar-track { background: transparent; }
#screen::-webkit-scrollbar-thumb { background: var(--dim); }

#input-line {
  display: flex;
  align-items: center;
  border-top: 1px solid var(--dim);
  padding-top: 0.5ch;
  margin-top: 0.5ch;
}

#prompt { color: var(--ok); }

#input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--fg);
  font: inherit;
  outline: none;
  caret-color: var(--ok);
}

#status-bar {
  color: var(--dim);
  border-top: 1px solid var(--dim);
  padding-top: 0.25ch;
  margin-top: 0.5ch;
  font-size: 12px;
  min-height: 1.5em;
}

.hidden { display: none !important; }
.dim { color: var(--dim); }
.err { color: var(--err); }
.ok { color: var(--ok); }
.warn { color: var(--warn); }
.accent { color: var(--accent); }
.dead { color: var(--dead); text-decoration: line-through; }
.sel { background: var(--sel); }

.line-expired { color: var(--dead); }
.line-sel { background: var(--sel); display: inline-block; width: 100%; }