:root {
  --bg: #0e1116;
  --panel: #14181f;
  --text: #e6e6e6;
  --muted: #9aa4b2;
  --accent: #f0c674;
  --link: #8ab4f8;
  --key: #232a35;
  --key-border: #3a4454;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

header { padding: 10px 16px 6px; }
header h1 { margin: 0; font-size: 18px; }
header p { margin: 4px 0 0; color: var(--muted); font-size: 14px; max-width: 70ch; }
a { color: var(--link); }

#savebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 8px 0 2px;
  padding: 8px 10px;
  border: 1px solid var(--key-border);
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  background: var(--panel);
}
#savebar.warn { border-color: #e5a50a; background: #2a2210; }
#savebar p { margin: 0; font-size: 14px; max-width: 75ch; }
#savemsg { flex: 1 1 320px; }
#savemsg code { color: var(--accent); }
#savestatus { flex-basis: 100%; color: var(--muted); overflow-wrap: anywhere; }
#savestatus:empty { display: none; }
#savestatus code { color: var(--text); user-select: all; }
#copycode {
  padding: 6px 12px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--key);
  color: var(--accent);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
#copycode:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.tag {
  margin-left: 6px;
  padding: 1px 6px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 500;
  vertical-align: middle;
}

main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0 16px 12px;
}

#term {
  flex: 1;
  min-height: 200px;
  padding: 8px;
  background: var(--panel);
  border-radius: 6px;
  overflow: hidden;
}

/* Extra keys: only on touch screens, where phone keyboards lack Tab, arrows and symbols. */
#keys { display: none; gap: 6px; padding-top: 8px; }
#keys button {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  padding: 0;
  background: var(--key);
  color: var(--text);
  border: 1px solid var(--key-border);
  border-radius: 6px;
  font: 16px ui-monospace, Menlo, Consolas, monospace;
  touch-action: manipulation;
}
#keys button:active { background: var(--key-border); }
@media (pointer: coarse) { #keys { display: flex; } }

@media (max-width: 600px) {
  header { padding: 8px 16px 4px; }
  header p { font-size: 13px; }
  main { padding: 0 8px 8px; }
  #term { padding: 4px; }
}

.noscript { padding: 16px; }