:root {
    --primary: #0ea5e9;
    --primary-dark: #0284c7;
    --accent: #f59e0b;
    --bg: #0f172a;
    --bg-card: #1e293b;
    --bg-hover: #334155;
    --border: #334155;
    --text: #f1f5f9;
    --text-light: #94a3b8;
    --text-muted: #64748b;
    --green: #22c55e;
    --red: #ef4444;
    --purple: #a78bfa;
    --radius: 10px;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',system-ui,-apple-system,sans-serif; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; }
a { color:var(--primary); text-decoration:none; }
a:hover { text-decoration:underline; }

/* Header */
.site-header { background:linear-gradient(135deg, #0c4a6e 0%, #0f172a 100%); border-bottom:1px solid var(--border); padding:0; }
.header-top { max-width:1100px; margin:0 auto; padding:20px 16px 0; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.logo { font-size:1.5rem; font-weight:900; color:#fff; display:flex; align-items:center; gap:8px; }
.logo span { color:var(--accent); }
.header-tagline { font-size:.82rem; color:var(--text-light); }
.header-search { display:flex; gap:8px; }
.header-search input { background:var(--bg-card); border:1px solid var(--border); color:var(--text); padding:8px 14px; border-radius:6px; font-size:.82rem; width:220px; outline:none; }
.header-search input:focus { border-color:var(--primary); }
.header-search input::placeholder { color:var(--text-muted); }

/* Category Nav */
.cat-nav { max-width:1100px; margin:0 auto; padding:12px 16px; display:flex; overflow-x:auto; gap:0; scrollbar-width:none; }
.cat-nav::-webkit-scrollbar { display:none; }
.cat-nav a { padding:8px 14px; font-size:.72rem; font-weight:600; color:var(--text-muted); white-space:nowrap; border-radius:6px; transition:all .2s; text-transform:uppercase; letter-spacing:.5px; }
.cat-nav a:hover, .cat-nav a.active { color:var(--primary); background:rgba(14,165,233,.1); text-decoration:none; }

/* Layout */
.container { max-width:1100px; margin:0 auto; padding:20px 16px; }
.forum-layout { display:grid; grid-template-columns:1fr 300px; gap:20px; }

/* Stats bar */
.stats-bar { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.stat { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:14px 20px; flex:1; min-width:140px; text-align:center; }
.stat .num { font-size:1.4rem; font-weight:900; color:var(--primary); }
.stat .lbl { font-size:.7rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px; margin-top:2px; }

/* Category sections */
.category-section { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:16px; overflow:hidden; }
.category-header { padding:16px 20px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; cursor:pointer; transition:background .2s; }
.category-header:hover { background:var(--bg-hover); }
.category-header h2 { font-size:1rem; font-weight:800; display:flex; align-items:center; gap:10px; }
.category-header h2 .icon { font-size:1.2rem; }
.category-header .meta { display:flex; gap:16px; font-size:.72rem; color:var(--text-muted); }
.category-header .meta span { display:flex; align-items:center; gap:4px; }

/* Thread list */
.thread-list { list-style:none; }
.thread { display:grid; grid-template-columns:40px 1fr auto; gap:12px; align-items:center; padding:12px 20px; border-bottom:1px solid rgba(51,65,85,.5); transition:background .15s; }
.thread:last-child { border-bottom:none; }
.thread:hover { background:var(--bg-hover); }
.thread .votes { text-align:center; }
.thread .votes .count { font-size:.9rem; font-weight:800; color:var(--green); }
.thread .votes .lbl { font-size:.6rem; color:var(--text-muted); text-transform:uppercase; }
.thread .title { font-size:.85rem; font-weight:600; color:var(--text); line-height:1.4; }
.thread .title:hover { color:var(--primary); }
.thread .title a { color:inherit; }
.thread .title a:hover { text-decoration:none; color:var(--primary); }
.thread .tags { display:flex; gap:4px; flex-wrap:wrap; margin-top:4px; }
.thread .tags span { font-size:.6rem; padding:2px 8px; border-radius:10px; font-weight:600; }
.thread .tags .hot { background:rgba(239,68,68,.15); color:var(--red); }
.thread .tags .popular { background:rgba(245,158,11,.15); color:var(--accent); }
.thread .tags .tip { background:rgba(34,197,94,.15); color:var(--green); }
.thread .tags .local { background:rgba(167,139,250,.15); color:var(--purple); }
.thread .tags .new { background:rgba(14,165,233,.15); color:var(--primary); }
.thread .reply-count { text-align:right; white-space:nowrap; }
.thread .reply-count .num { font-size:.85rem; font-weight:700; color:var(--text-light); }
.thread .reply-count .lbl { font-size:.6rem; color:var(--text-muted); }

/* Sidebar */
.sidebar { display:flex; flex-direction:column; gap:16px; }
.sidebar-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:16px; }
.sidebar-card h3 { font-size:.82rem; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:var(--accent); margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid var(--border); }
.sidebar-card ul { list-style:none; }
.sidebar-card li { font-size:.8rem; padding:6px 0; border-bottom:1px solid rgba(51,65,85,.4); color:var(--text-light); }
.sidebar-card li:last-child { border-bottom:none; }
.sidebar-card li a { color:var(--text-light); }
.sidebar-card li a:hover { color:var(--primary); text-decoration:none; }
.sidebar-card li .num { color:var(--text-muted); font-size:.7rem; float:right; }
.sidebar-card .highlight { color:var(--accent); font-weight:700; }
.sidebar-card p { font-size:.8rem; color:var(--text-light); line-height:1.6; }

/* Thread detail page */
.thread-detail { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:24px; margin-bottom:16px; }
.thread-detail h1 { font-size:1.4rem; font-weight:900; margin-bottom:8px; line-height:1.3; }
.thread-detail .thread-meta { font-size:.75rem; color:var(--text-muted); margin-bottom:16px; display:flex; gap:16px; flex-wrap:wrap; }
.thread-detail .answer { font-size:.88rem; color:var(--text-light); line-height:1.8; }
.thread-detail .answer p { margin-bottom:12px; }
.thread-detail .answer ul, .thread-detail .answer ol { margin:8px 0 12px 20px; }
.thread-detail .answer li { margin-bottom:6px; line-height:1.6; }
.thread-detail .answer strong { color:var(--text); }
.thread-detail .answer a { color:var(--primary); }
.thread-detail .tip-box { background:rgba(34,197,94,.08); border:1px solid rgba(34,197,94,.2); border-radius:8px; padding:14px 16px; margin:16px 0; font-size:.82rem; color:var(--green); }
.thread-detail .warning-box { background:rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.2); border-radius:8px; padding:14px 16px; margin:16px 0; font-size:.82rem; color:var(--red); }

.breadcrumb { font-size:.75rem; color:var(--text-muted); margin-bottom:16px; }
.breadcrumb a { color:var(--text-muted); }
.breadcrumb a:hover { color:var(--primary); }

/* Related threads */
.related { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:20px; }
.related h3 { font-size:.85rem; font-weight:800; margin-bottom:12px; color:var(--accent); }
.related ul { list-style:none; }
.related li { padding:8px 0; border-bottom:1px solid rgba(51,65,85,.4); }
.related li:last-child { border-bottom:none; }
.related li a { font-size:.82rem; color:var(--text-light); }
.related li a:hover { color:var(--primary); }

/* Footer */
.site-footer { text-align:center; padding:40px 16px 60px; color:var(--text-muted); font-size:.75rem; max-width:700px; margin:0 auto; border-top:1px solid var(--border); margin-top:40px; }
.site-footer a { color:var(--text-muted); }
.site-footer a:hover { color:var(--primary); }
.site-footer .domain { margin-top:12px; font-size:.78rem; }
.site-footer .domain a { color:var(--accent); }

/* Category page */
.category-hero { background:linear-gradient(135deg, #0c4a6e 0%, #1e293b 100%); padding:30px 20px; text-align:center; border-bottom:1px solid var(--border); }
.category-hero h1 { font-size:1.5rem; font-weight:900; margin-bottom:4px; }
.category-hero p { font-size:.85rem; color:var(--text-light); }

/* Search filter */
#search-filter { width:100%; background:var(--bg); border:1px solid var(--border); color:var(--text); padding:10px 16px; border-radius:var(--radius); font-size:.85rem; margin-bottom:16px; outline:none; }
#search-filter:focus { border-color:var(--primary); }
#search-filter::placeholder { color:var(--text-muted); }

/* Responsive */
@media (max-width: 768px) {
    .forum-layout { grid-template-columns:1fr; }
    .header-top { flex-direction:column; align-items:flex-start; }
    .header-search input { width:100%; }
    .stats-bar { gap:8px; }
    .stat { padding:10px 12px; min-width:0; }
    .stat .num { font-size:1.1rem; }
    .thread { grid-template-columns:32px 1fr auto; gap:8px; padding:10px 14px; }
    .thread .title { font-size:.8rem; }
    .category-header { padding:14px 14px; }
    .category-header h2 { font-size:.9rem; }
    .thread-detail { padding:18px 14px; }
    .thread-detail h1 { font-size:1.2rem; }
}
@media (max-width: 480px) {
    .stats-bar { display:grid; grid-template-columns:repeat(2,1fr); }
    .cat-nav a { padding:8px 10px; font-size:.68rem; }
    .thread .reply-count { display:none; }
}
