:root {
  --bg: #f6f7f7;
  --panel: #fff;
  --text: #1e1e1e;
  --muted: #646970;
  --border: #dcdcde;
  --accent: #2c5d8f;
  --accent-text: #fff;
  --error: #b32d2e;
  --ok: #00703c;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: var(--bg);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); }
a { color: var(--accent); }
code { background: #eee; padding: 0 .25em; border-radius: 3px; }
.muted { color: var(--muted); }
.small { font-size: .85em; margin-left: .5em; }

.topbar {
  display: flex; align-items: center; gap: 1.5rem;
  padding: 0 1rem; height: 48px;
  background: #1d2327; color: #f0f0f1;
}
.topbar a { color: #f0f0f1; text-decoration: none; }
.topbar .brand { font-weight: 600; letter-spacing: .02em; }
.topbar nav { flex: 1; }
.logout { display: flex; gap: .75rem; align-items: center; }
.who { color: #a7aaad; }
button.link { background: none; border: 0; color: #f0f0f1; cursor: pointer; padding: 0; font: inherit; }

.page { max-width: 1000px; margin: 0 auto; padding: 1.5rem 1rem; }
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.actions form { margin: 0; }

button, .button {
  font: inherit; padding: .45rem .9rem; border-radius: 4px; cursor: pointer;
  border: 1px solid var(--accent); background: var(--panel); color: var(--accent);
}
button.primary { background: var(--accent); color: var(--accent-text); }
button:disabled { opacity: .6; cursor: default; }

.cards { list-style: none; padding: 0; display: grid; gap: .75rem; }
.cards li {
  background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
  padding: 1rem; display: flex; gap: 1rem; align-items: baseline; flex-wrap: wrap;
}
.badge { margin-left: auto; font-size: .8rem; border: 1px solid var(--border); border-radius: 99px; padding: .1rem .6rem; }

table.list { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--border); }
table.list th, table.list td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--border); }
table.list th { font-weight: 600; font-size: .9rem; }
.status { font-size: .85rem; }
.status-publish { color: var(--ok); }
.status-draft, .status-pending { color: var(--muted); }

.notice { background: #edfaef; border-left: 4px solid var(--ok); padding: .6rem .9rem; }
.error { background: #fcf0f1; border-left: 4px solid var(--error); padding: .6rem .9rem; }

body.login { display: grid; place-items: center; min-height: 100vh; }
.login-box { width: min(360px, calc(100vw - 32px)); background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 1.5rem; }
.login-box h1 { margin-top: 0; font-size: 1.4rem; }
.login-box form { display: grid; gap: 1rem; }
.login-box label { display: grid; gap: .3rem; font-size: .9rem; }
.login-box input { font: inherit; padding: .5rem; border: 1px solid #8c8f94; border-radius: 4px; }

@media (max-width: 640px) {
  table.list th:nth-child(4), table.list td:nth-child(4),
  table.list th:nth-child(5), table.list td:nth-child(5) { display: none; }
}

.narrow { max-width: 480px; }
.page.narrow { max-width: 520px; }
form.stack { display: grid; gap: 1rem; }
form.stack label { display: grid; gap: .3rem; font-size: .9rem; }
form.stack label.check { display: flex; gap: .5rem; align-items: center; }
form.stack input[type=text], form.stack input[type=email], form.stack input[type=password] {
  font: inherit; padding: .5rem; border: 1px solid #8c8f94; border-radius: 4px;
}
form.inline { display: flex; gap: .4rem; align-items: center; margin: 0; }
form.inline select { font: inherit; padding: .3rem; }
code.secret { font-size: 1.1rem; padding: .3rem .6rem; user-select: all; }
.small-text { font-size: .85rem; }
.topbar .logout a { color: #f0f0f1; }