:root{
  --bg:#10141c;--card:#1b1f28;--border:#323844;--text:#f1f5f9;--muted:#7d8798;--cyan:#00b4d8;--blue:#2962ff;--tag-text:#bcd2ff;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f4f6f9;--card:#ffffff;--border:#dde2ea;--text:#151a23;--muted:#68717e;--cyan:#0092b8;--blue:#2962ff;--tag-text:#1e40af;
  }
}
body{font-family:system-ui,sans-serif;max-width:720px;margin:0 auto;padding:24px;background:var(--bg);color:var(--text);line-height:1.6;}
a{color:var(--cyan);}
img{display:block;}
.site-nav{display:flex;gap:10px;margin-bottom:24px;}
.nav-link{flex:1;text-align:center;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:10px;color:var(--text);text-decoration:none;font-weight:700;font-size:.85rem;}
.breadcrumb{font-size:.78rem;color:var(--muted);margin-bottom:14px;}
.breadcrumb a{color:var(--cyan);}
.tag{display:inline-block;padding:4px 10px;border-radius:8px;font-size:.8rem;margin:14px 0 10px;font-weight:700;}
.tag-cyan{background:rgba(0,180,216,.15);color:#00b4d8;}
.tag-green{background:rgba(14,203,129,.15);color:#0ecb81;}
.tag-yellow{background:rgba(245,193,68,.15);color:#f5c144;}
.tag-blue{background:rgba(41,98,255,.18);color:var(--tag-text);}
.tag-red{background:rgba(246,70,93,.15);color:#f6465d;}
.tag-purple{background:rgba(168,85,247,.15);color:#c084fc;}
.tag-pink{background:rgba(236,72,153,.15);color:#f472b6;}
.tag-lime{background:rgba(163,230,53,.15);color:#a3e635;}
.cta{display:inline-block;margin-top:24px;background:var(--blue);color:#fff;padding:12px 20px;border-radius:10px;text-decoration:none;font-weight:700;}
.list-card{display:block;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px 18px;margin-bottom:12px;}
#articlesList{display:grid;grid-template-columns:repeat(2, 1fr);gap:16px;}
#articlesList .list-card{margin-bottom:0;}
@media (max-width:600px){ #articlesList{grid-template-columns:1fr;} }
.list-card .card-title{margin:6px 0;font-size:1rem;}
.list-card .card-title a{color:var(--text);text-decoration:none;font-weight:700;}
.list-card p{margin:0;font-size:.85rem;color:var(--muted);}
.category-intro{color:var(--muted);font-size:.9rem;margin-bottom:20px;}
.filter-wrap{position:relative;margin-bottom:20px;}
.filter-wrap::after{content:"";position:absolute;right:16px;top:50%;transform:translateY(-50%);width:9px;height:9px;border-right:2px solid var(--cyan);border-bottom:2px solid var(--cyan);transform:translateY(-70%) rotate(45deg);pointer-events:none;}
#categoryFilter{width:100%;padding:12px 40px 12px 14px;background:var(--card);border:1px solid var(--border);border-radius:10px;color:var(--text);font-size:.85rem;font-family:inherit;appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;}
#categoryFilter:focus{outline:none;border-color:var(--cyan);}
#categoryFilter option{background:var(--card);color:var(--text);}
.tip-box{background:rgba(245,193,68,.12);border-left:3px solid #f5c144;border-radius:8px;padding:10px 14px;margin:0 0 10px;color:var(--text);}
.comment-box{background:rgba(125,135,152,.12);border-left:3px solid var(--muted);border-radius:8px;padding:10px 14px;margin:0 0 10px;color:var(--text);}
.alarm-box{background:rgba(246,70,93,.12);border-left:3px solid #f6465d;border-radius:8px;padding:10px 14px;margin:0 0 10px;color:var(--text);}
.yt-link{display:inline-block;margin:10px 10px 10px 0;color:#ff5555;font-weight:700;text-decoration:none;}
.tg-link{display:inline-block;margin:10px 10px 10px 0;color:var(--cyan);font-weight:700;text-decoration:none;}
.img-caption{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.65);color:#fff;font-size:.72rem;padding:4px 9px;border-radius:6px;}
.cover-img{width:100%;height:auto;border-radius:12px;}
.content-img-wrap{position:relative;margin:16px 0;}
.content-img{display:block;max-width:100%;height:auto;border-radius:10px;}
.thumb-img{width:100%;height:160px;object-fit:cover;border-radius:10px;margin-bottom:10px;}