:root{--bg:#0f172a;--surface:#fff;--muted:#6b7280;--accent:#0ea5a3;--accent-600:#089089;--glass:#0f172a05;--radius:12px;--max-width:1100px;--fw-regular:400;--fw-medium:600}*{box-sizing:border-box}html,body{height:100%}body{color:#0f172a;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(#f8fafc 0%,#fff 100%);margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial;font-size:16px;line-height:1.5}.container{width:90%;max-width:var(--max-width);margin:0 auto}.topnav{z-index:50;background:#fff;border-bottom:1px solid #eef2f7;position:sticky;top:0}.topnav-inner{justify-content:space-between;align-items:center;gap:1rem;padding:.8rem 0;display:flex}.brand{align-items:center;gap:.6rem;display:flex}.brand-title{color:#0f172a;font-size:1.05rem;font-weight:700;text-decoration:none}.topnav-actions{align-items:center;gap:.6rem;display:flex}.search input{border:1px solid #e6eef5;border-radius:999px;outline:none;width:220px;padding:.45rem .6rem}.btn{cursor:pointer;border:1px solid #0000;border-radius:8px;padding:.55rem .8rem;font-weight:600}.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}.btn-ghost{color:#0f172a;background:0 0;border-color:#e6eef5}.main-grid{grid-template-columns:1fr;gap:28px;margin-bottom:30px;padding:28px 0;display:grid}.feed{min-width:0;margin-bottom:60px}.hero{background:linear-gradient(90deg,#0ea5a30f,#6366f108);border-radius:12px;align-items:center;gap:1.25rem;margin-bottom:18px;padding:1.25rem;display:flex}.hero-left h1{margin:0 0 6px;font-size:1.6rem}.muted{color:var(--muted);font-size:.95rem}.hero-meta{flex-wrap:wrap;gap:.5rem;margin-top:10px;display:flex}.chip{color:#0f172a;background:#fff;border:1px solid #e6eef5;border-radius:999px;padding:6px 10px;font-size:.85rem;text-decoration:none}.section-title{justify-content:space-between;align-items:center;margin:10px 0 12px;display:flex}.posts-list{flex-direction:column;gap:14px;display:flex}.post-card{background:#fff;border:1px solid #eef2f7;border-radius:12px;align-items:flex-start;gap:16px;padding:16px;transition:transform .16s,box-shadow .16s;display:flex}.post-card:hover{transform:translateY(-4px);box-shadow:0 8px 20px #0f172a0f}.post-thumb{min-width:140px;height:84px;color:var(--accent-600);background:linear-gradient(135deg,#e6f7f6,#dff3ff);border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;font-weight:700;display:flex;overflow:hidden}.post-body{flex:1;min-width:0}.post-title{margin:0 0 6px;font-size:1.05rem}.post-excerpt{color:var(--muted);margin:0 0 10px;font-size:.95rem}.post-meta{color:var(--muted);align-items:center;gap:12px;font-size:.9rem;display:flex}.author{align-items:center;gap:10px;display:flex}.avatar{background:#f8fafc;border:1px solid #eef2f7;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;font-weight:700;display:flex}#sortSelect{border-radius:6px;padding:.2rem}.sidebar .card{background:#fff;border:1px solid #eef2f7;border-radius:12px;margin-bottom:14px;padding:14px}.tags{flex-wrap:wrap;gap:8px;display:flex}.tag{cursor:pointer;background:#f1f5f9;border:0;border-radius:8px;padding:6px 8px;font-size:.9rem}.footer{background:#fff;border-top:1px solid #eef2f7;width:100%;margin-top:24px;padding:18px 0;position:fixed;bottom:0}.footer-inner{color:var(--muted);justify-content:space-between;align-items:center;font-size:.95rem;display:flex}.article-modal{background:#fff;border-radius:12px;width:min(900px,96%);max-height:90vh;padding:20px;overflow:auto}.close{cursor:pointer;background:0 0;border:0;font-size:20px;position:absolute;top:14px;right:14px}.article-header h1{margin:0 0 8px;font-size:1.45rem}.article-meta{justify-content:space-between;align-items:center;gap:12px;margin-top:12px;display:flex}.article-content{color:#111827;margin-top:18px;line-height:1.8}.article-content p{margin:0 0 12px}.article-actions .icon-btn{cursor:pointer;background:0 0;border:0;padding:6px 8px;font-size:1rem}.card h3{margin:0 0 8px}.section-title h2{margin:0}@media (max-width:980px){.main-grid{grid-template-columns:1fr}.sidebar{order:2}.feed{order:1}.hero{text-align:center;flex-direction:column}.hero-left h1{font-size:1.25rem}.post-thumb{display:none}.search input{width:140px}}.write-btn{text-decoration:none}