:root {
  --bg: #fff;
  --fg: #222;
  --muted: #6b6b6b;
  --border: #e3e3e3;
  --link: #0b6bb3;
  --accent: #0088cc;
  --code-bg: #f4f4f4;
  --quote-bg: #f8f8f8;
  --banner-bg: #fff8e1;
  --banner-border: #f3d58a;
}

* { box-sizing: border-box; }
html { font-size: 16px; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  line-height: 1.5;
  color: var(--fg);
  background: var(--bg);
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; }

.site-header { border-bottom: 1px solid var(--border); background: #fff; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 56px; }
.brand { font-weight: 600; font-size: 1.15rem; color: var(--fg); }
.site-header nav a { margin-left: 18px; color: var(--muted); }
.site-header nav a:hover { color: var(--fg); }

.archive-banner { background: var(--banner-bg); border-bottom: 1px solid var(--banner-border); font-size: 0.9rem; }
.archive-banner .wrap { padding: 8px 16px; }

main { padding: 24px 16px 48px; }
.page-header h1 { margin: 0 0 4px; font-size: 1.6rem; }
.page-header p { margin: 0 0 12px; color: var(--muted); }
.user-header { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; }
.user-header .avatar { border-radius: 50%; }

.site-footer { border-top: 1px solid var(--border); color: var(--muted); font-size: 0.85rem; }
.site-footer .wrap { padding: 16px; }

/* Category and topic lists */
.category-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
.category-card { border: 1px solid var(--border); border-radius: 6px; padding: 14px 16px; }
.category-card h2 { margin: 0 0 6px; font-size: 1.1rem; display: flex; justify-content: space-between; align-items: baseline; }
.category-card .count { color: var(--muted); font-size: 0.85rem; font-weight: normal; }
.category-description { color: var(--muted); font-size: 0.9rem; }
.featured-topics { list-style: none; margin: 8px 0 0; padding: 0; font-size: 0.95rem; }
.featured-topics li { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; border-top: 1px solid var(--border); }
.featured-topics time { color: var(--muted); font-size: 0.85rem; white-space: nowrap; }

.category-badge { display: inline-flex; align-items: center; gap: 6px; color: var(--fg); font-size: 0.9rem; white-space: nowrap; }
.category-color { display: inline-block; width: 9px; height: 9px; }
.tags { margin-left: 6px; }
.tag { display: inline-block; font-size: 0.8rem; color: var(--muted); background: var(--code-bg); padding: 0 6px; border-radius: 3px; margin-right: 4px; }
.status { font-size: 0.75rem; color: var(--muted); border: 1px solid var(--border); border-radius: 3px; padding: 0 5px; margin-left: 6px; vertical-align: middle; }

table.topic-list, table.user-list { width: 100%; border-collapse: collapse; }
table.topic-list th, table.user-list th { text-align: left; font-weight: 600; color: var(--muted); font-size: 0.85rem; padding: 8px 6px; border-bottom: 2px solid var(--border); }
table.topic-list td, table.user-list td { padding: 10px 6px; border-bottom: 1px solid var(--border); vertical-align: top; }
.col-posters { white-space: nowrap; width: 145px; }
.col-posters a { display: inline-block; margin-right: 3px; }
.col-posters .avatar { border-radius: 50%; vertical-align: middle; }
.excerpt { margin: 4px 0 0; color: var(--muted); font-size: 0.9rem; }
.col-num { text-align: right; width: 70px; color: var(--muted); }
.col-activity { width: 110px; color: var(--muted); white-space: nowrap; }
.col-category { width: 200px; }
.topic-title { font-size: 1.05rem; }
tr.closed .topic-title, tr.archived .topic-title { color: var(--muted); }
td.empty { color: var(--muted); text-align: center; }
.pagination { display: flex; justify-content: center; gap: 24px; margin: 24px 0; color: var(--muted); }
.tag-index { list-style: none; padding: 0; }
.tag-index li { padding: 4px 0; }
.user-list .avatar { border-radius: 50%; vertical-align: middle; margin-right: 6px; }
.fullname { color: var(--muted); margin-left: 6px; }
.user-title { color: var(--muted); font-style: italic; margin-left: 6px; }
.user-joined { color: var(--muted); margin-left: 6px; }
.user-posts { list-style: none; padding: 0; }
.user-posts li { padding: 6px 0; border-bottom: 1px solid var(--border); }
.user-posts time, .user-posts .post-number { color: var(--muted); font-size: 0.85rem; margin-left: 6px; }

/* Topic page */
.topic-header h1 { margin: 0 0 6px; font-size: 1.7rem; line-height: 1.25; }
.topic-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 20px; }
.post { display: flex; gap: 14px; padding: 18px 0; border-top: 1px solid var(--border); }
.post:target { background: #fffbe6; margin: 0 -12px; padding-left: 12px; padding-right: 12px; }
.post-avatar { flex: 0 0 45px; }
.post-avatar .avatar { border-radius: 50%; display: block; }
.post-body { flex: 1 1 auto; min-width: 0; }
.post-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 0.9rem; margin-bottom: 6px; }
.post-meta .username { font-weight: 600; color: var(--fg); }
.post-meta .fullname, .post-meta .user-title { margin-left: 0; }
.post-meta .reply-to { color: var(--muted); }
.post-meta .post-date { margin-left: auto; color: var(--muted); }
.post-meta .post-number { color: var(--muted); }
.post-footer { display: flex; gap: 14px; font-size: 0.85rem; color: var(--muted); margin-top: 8px; }
.badge { border: 1px solid var(--border); border-radius: 3px; padding: 0 5px; }
.moderator-action .post-body { background: #f1f7f1; padding: 8px 12px; border-radius: 4px; }
.wiki .post-body { background: #f3f9ec; padding: 8px 12px; border-radius: 4px; }
.small-action { display: block; padding: 8px 0 8px 59px; color: var(--muted); font-size: 0.9rem; }
.small-action time { margin-left: 8px; }
.topic-footer { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 18px; padding-top: 12px; border-top: 2px solid var(--border); color: var(--muted); font-size: 0.9rem; }

/* Cooked post content, following Discourse's class names */
.cooked { word-wrap: break-word; overflow-wrap: anywhere; }
.cooked p { margin: 0 0 1em; }
.cooked > :last-child { margin-bottom: 0; }
.cooked h1, .cooked h2, .cooked h3 { line-height: 1.3; margin: 1.2em 0 0.5em; }
.cooked h1 { font-size: 1.4rem; } .cooked h2 { font-size: 1.25rem; } .cooked h3 { font-size: 1.1rem; }
.cooked a.anchor { display: none; }
.cooked pre { background: var(--code-bg); padding: 10px 12px; border-radius: 4px; overflow-x: auto; font-size: 0.875rem; line-height: 1.4; }
.cooked code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; background: var(--code-bg); padding: 1px 4px; border-radius: 3px; }
.cooked pre code { background: none; padding: 0; font-size: inherit; }
.cooked blockquote, .cooked aside.quote { margin: 0 0 1em; padding: 8px 14px; border-left: 4px solid #ccc; background: var(--quote-bg); }
.cooked aside.quote .title { font-size: 0.9rem; color: var(--muted); margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.cooked aside.quote .title .avatar { border-radius: 50%; width: 20px; height: 20px; }
.cooked aside.quote .quote-link { margin-left: auto; font-size: 0.8rem; }
.cooked aside.quote blockquote { border: none; background: none; padding: 0; margin: 0; }
.cooked table { border-collapse: collapse; margin-bottom: 1em; display: block; overflow-x: auto; }
.cooked th, .cooked td { border: 1px solid var(--border); padding: 4px 8px; }
.cooked img.emoji { width: 20px; height: 20px; vertical-align: middle; }
.cooked .lightbox-wrapper { display: block; margin-bottom: 1em; }
.cooked .lightbox-wrapper img { display: block; max-height: 600px; width: auto; }
.cooked a.mention { background: var(--code-bg); border-radius: 3px; padding: 0 4px; color: var(--fg); }
.cooked span.mention, .cooked .dead-link { color: var(--muted); }
.cooked aside.onebox { border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: 4px; padding: 10px 14px; margin-bottom: 1em; }
.cooked aside.onebox header.source { font-size: 0.8rem; color: var(--muted); margin-bottom: 4px; }
.cooked aside.onebox .onebox-body img { max-width: 120px; max-height: 120px; float: left; margin: 0 12px 8px 0; }
.cooked aside.onebox .onebox-body::after { content: ""; display: block; clear: both; }
.cooked aside.onebox h3, .cooked aside.onebox h4 { margin: 0 0 4px; font-size: 1rem; }
.cooked .attachment::before { content: "\1F4CE "; }
.cooked details summary { cursor: pointer; }
.cooked .spoiler { background: #ddd; }
.cooked .chcklst-box::before { content: "\2610 "; }
.cooked .chcklst-box.checked::before { content: "\2611 "; }
.cooked .badge-category { font-size: 0.85rem; }
.cooked hr { border: 0; border-top: 1px solid var(--border); margin: 1.5em 0; }

@media (max-width: 700px) {
  .site-header nav a { margin-left: 12px; }
  .col-category, .col-posters, .col-views { display: none; }
  .post { gap: 10px; }
  .post-avatar { flex-basis: 32px; }
  .post-avatar .avatar { width: 32px; height: 32px; }
  .small-action { padding-left: 0; }
}