/* ===== Theme Variables ===== */
:root {
 --bg: #000;
 --surf: #0a0a0a;
 --line: #222;
 --fg: #eaeaea;
 --dim: #666; /* Main text / default link color */
 --accent: #fff; /* Accent / hover color */
 --mono: "SFMono-Regular", Consolas, monospace;
 --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

[data-theme="light"] {
 --bg: #ffffff;
 --surf: #f5f5f5;
 --line: #e0e0e0;
 --fg: #1a1a1a;
 --dim: #888; /* Gray in light mode */
 --accent: #000;
}

/* ===== Global Reset ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
html { background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-anchor: auto; }
body { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

/* ===== Header ===== */
.site-head { padding: 48px 0 32px; }
.brand { font-size: 24px; font-weight: 600; color: var(--accent); text-decoration: none; }
.tagline { font-size: 15px; color: var(--dim); margin-top: 6px; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.5px; }
[data-theme="dark"] .tagline { color: #999; }

/* ===== Nav Links ===== */
nav { margin-top: 24px; display: flex; gap: 24px; }
nav a {
 color: var(--dim); /* Default gray */
 font-size: clamp(14px, 0.5vw + 12px, 16px);
 font-family: var(--mono);
 text-decoration: none;
 transition: color 0.2s;
}
nav a:hover, nav a.act {
 color: var(--accent); /* Brighten on hover/active */
}

/* ===== Theme Toggle ===== */
.theme-btn {
 background: transparent;
 border: 1px solid var(--line);
 color: var(--dim);
 width: 40px;
 height: 40px;
 border-radius: 8px;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: all 0.2s;
 margin-top: 4px;
}
.theme-btn:hover {
 border-color: var(--accent);
 color: var(--accent);
}
.theme-btn svg { transition: transform 0.2s; }
.theme-btn:hover svg { transform: scale(1.1); }

/* ===== Main ===== */
main { padding: 24px 0 80px; }
.page-title { font-size: 24px; color: #444; text-transform: uppercase; letter-spacing: 1px; margin: 0 auto 10px; max-width: 960px; }
[data-theme="dark"] .page-title { color: #CCC; }
.article-title { font-size: 30px; color: var(--fg); text-transform: none; letter-spacing: 0; margin: 0 auto 8px; max-width: 680px; }
.page-desc { font-size: 15px; color: var(--dim); margin: 0 auto 38px; line-height: 1.7; max-width: 960px; }
[data-theme="dark"] .page-desc { color: #999; }
.post-date { font-size: 14px; color: var(--dim); margin: 0 auto 32px; max-width: 680px; }
[data-theme="dark"] .post-date { color: #999; }

/* ===== Article Content ===== */
.article-content { font-size: 17px; color: #333; line-height: 1.75; max-width: 680px; margin: 0 auto; }
[data-theme="dark"] .article-content { color: #D4D4D4; }
.article-content h2 { font-size: 24px; color: var(--fg); margin: 32px 0 12px; }
.article-content h3 { font-size: 20px; color: var(--fg); margin: 24px 0 8px; }
.article-content p { margin-bottom: 16px; }
.article-content ul, .article-content ol { margin: 0 0 16px 20px; }
.article-content li { margin-bottom: 6px; }
.article-content table { font-size: 15px; }
.article-content th { font-size: 14px; }
.article-content blockquote { margin: 16px 0; padding: 10px 15px; border-left: 4px solid var(--line); background: var(--surf); }
.article-content blockquote strong { color: var(--fg); display: block; margin-bottom: 4px; }
.article-content blockquote.hint-tip { border-left-color: #4caf50; }
.article-content blockquote.hint-caution { border-left-color: #ff9800; }
.article-content blockquote.hint-info { border-left-color: #2196f3; }
[data-theme="dark"] .article-content blockquote.hint-tip { border-left-color: #81c784; }
[data-theme="dark"] .article-content blockquote.hint-caution { border-left-color: #ffb74d; }
[data-theme="dark"] .article-content blockquote.hint-info { border-left-color: #64b5f6; }
.article-content strong { color: var(--fg); }
.article-content a { color: var(--fg); text-decoration: none; }
.article-content a:hover { color: var(--dim); text-decoration: underline; }

/* ===== Table ===== */
.table-wrap { border: 1px solid var(--line); overflow-x: auto; max-width: 960px; margin: 0 auto; border-radius: 4px; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th { text-align: left; padding: 12px 16px; color: var(--dim); font-weight: 500; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 13px; text-transform: uppercase; }
td { padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
td .name { color: var(--fg); font-weight: 500; text-decoration: none; }
td .name:hover { color: var(--fg); text-decoration: underline; }
td .lic { font-family: var(--mono); font-size: 12px; color: var(--dim); }
td .note { font-size: 13px; color: var(--dim); margin-top: 4px; }
td .tag { font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; padding: 3px 10px; border-radius: 4px; font-weight: 500; background: #f5f5f5; color: #555; border: 1px solid #e0e0e0; display: inline-block; }
[data-theme="dark"] td .tag { background: #1a1a1a; color: #999; border-color: #333; }

/* ===== Table Go Column ===== */
td.go {
 font-size: 14px;
 color: var(--dim);
 white-space: nowrap;
 font-family: var(--mono);
}
[data-theme="dark"] td.go { color: #999; }

tr:last-child td { border-bottom: none; }

/* ===== Topics Grid ===== */
.tags-grid { display: flex; flex-wrap: wrap; gap: 12px; max-width: 960px; margin: 0 auto; }
.tag-item { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 4px; text-decoration: none; transition: border-color 0.2s; }
.tag-item:hover { border-color: var(--fg); }
.tag-name { font-size: 14px; color: var(--fg); font-family: var(--mono); }
.tag-count { font-size: 12px; color: var(--dim); font-family: var(--mono); }
[data-theme="dark"] .tag-item { border-color: #333; }
[data-theme="dark"] .tag-item:hover { border-color: #fff; }/* ===== Pagination ===== */
.pagination { display: flex; justify-content: center; gap: 8px; list-style: none; padding: 24px 0; font-family: var(--mono); }
.pagination .page-link { padding: 6px 12px; border: 1px solid var(--line); border-radius: 4px; color: var(--dim); text-decoration: none; font-size: 14px; display: inline-block; }
.pagination .page-link:hover { color: var(--fg); border-color: var(--fg); }
.pagination li.active .page-link { color: var(--fg); border-color: var(--fg); background: var(--surf); }
.pagination li.disabled .page-link { color: var(--dim); opacity: 0.4; cursor: default; }

/* ===== Footer ===== */
.site-foot {
 border-top: 1px solid var(--line);
 padding: 24px 0;
 font-size: 14px;
 color: var(--dim);
 font-family: var(--mono);
}
[data-theme="dark"] .site-foot { color: #999; }
[data-theme="dark"] .site-foot a { color: #999; }
.site-foot a {
 color: var(--dim); /* Default gray */
 text-decoration: underline;
 transition: color 0.2s;
}
.site-foot a:hover {
 color: var(--accent); /* Brighten on hover */
}

/* ===== Back to Top ===== */
#top-btn {
  position: fixed; bottom: 32px; right: 32px;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent; color: var(--dim);
  font-size: 20px; cursor: pointer;
  display: none; align-items: center; justify-content: center;
  z-index: 100; transition: opacity 0.2s;
}
#top-btn:hover { color: var(--fg); border-color: var(--fg); }
[data-theme="dark"] #top-btn { border-color: #333; color: #999; }
[data-theme="dark"] #top-btn:hover { color: #fff; border-color: #fff; }
@media (max-width: 768px) {
  #top-btn { bottom: 16px; right: 16px; width: 40px; height: 40px; font-size: 18px; }
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
 .site-head { padding: 28px 0 20px; }
 nav { gap: 16px; flex-wrap: wrap; }
 .article-content { max-width: 100%; overflow-x: auto; }
 body { padding: 0 16px; }
 main { padding-bottom: 40px; }
 td:has(.tag) { display: none; }
 td.go { display: none; }
 .post-date { display: none; }
}