:root {
  color: #1c1c1c;
  background: #fff;
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body { margin: 0; }

header {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid #ddd;
}

header form, .add { display: flex; gap: 8px; align-items: center; }

header .add { margin-left: auto; }

label { display: grid; gap: 4px; font-size: 14px; }

input, select, textarea, button {
  font: inherit;
  color: inherit;
  background: #fff;
  border: 1px solid #bbb;
  padding: 6px 8px;
}

button { cursor: pointer; }

button.danger, .alert { color: #9d1c1c; }

.warn { color: #8a5a00; margin: 12px 20px; }

.layout { display: grid; grid-template-columns: 240px 1fr; min-height: calc(100vh - 58px); }

nav { display: grid; align-content: start; border-right: 1px solid #ddd; }

nav a { padding: 12px 16px; color: inherit; text-decoration: none; }

nav a.active { background: #f3f3f3; font-weight: 600; }

main { padding: 20px; }

table { width: 100%; border-collapse: collapse; }

th, td { text-align: left; padding: 8px; border-bottom: 1px solid #eee; vertical-align: top; }

.mark-\+ td:first-child { color: #0d6b32; font-weight: 700; }

.mark-- td:first-child { color: #9d1c1c; font-weight: 700; }

.mark-\* td:first-child { color: #8a5a00; font-weight: 700; }

.stable { color: #0d6b32; }

.meta, .empty { color: #555; }

.login { min-height: 100vh; display: grid; place-items: center; }

.login form, .key { width: min(520px, 100%); display: grid; gap: 12px; }

h1, h2 { margin: 0; font-weight: 600; }