.blog-hero{padding:100px 24px 40px;text-align:center;position:relative}
.blog-hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 30% 50%,rgba(0,191,168,0.12),transparent 55%),radial-gradient(ellipse at 70% 30%,rgba(0,191,168,0.08),transparent 45%);pointer-events:none}
.blog-hero-content{position:relative}
.blog-hero h1{font-size:clamp(2rem,5vw,3rem);font-weight:800;letter-spacing:-0.03em;margin-bottom:8px;background:linear-gradient(135deg,#fff,var(--accent-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.blog-hero p{color:var(--text-muted);font-size:1.05rem}
.blog-toolbar{position:sticky;top:64px;z-index:100;background:rgba(11,25,36,0.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:12px 24px;overflow:hidden}
.blog-filters{display:flex;gap:8px;max-width:1200px;margin:0 auto;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;align-items:center}.blog-filters.hidden{display:none}
.blog-filters::-webkit-scrollbar{display:none}
.blog-search{display:flex;align-items:center;gap:8px;background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px 14px;min-width:180px;transition:border-color var(--duration) var(--ease);margin-left:auto;flex-shrink:0}
.blog-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.blog-search i{color:var(--text-muted);font-size:0.85rem;flex-shrink:0}
.blog-search input{flex:1;background:none;border:none;outline:none;color:var(--text);font-family:var(--font);font-size:0.85rem;min-width:80px}
.blog-search input::placeholder{color:var(--text-dim)}
.filter-btn{white-space:nowrap;padding:5px 12px;border-radius:16px;border:1px solid var(--border);background:transparent;color:var(--text-muted);font-size:0.78rem;font-family:var(--font);font-weight:500;cursor:pointer;transition:all var(--duration) var(--ease);min-height:34px;display:inline-flex;align-items:center;gap:4px}
.filter-btn:hover{color:var(--text);border-color:var(--border-hover)}
.filter-btn.active{background:var(--orange);border-color:var(--orange);color:#fff}
.blog-count{max-width:1200px;margin:0 auto;color:var(--text-muted);font-size:0.85rem;padding:16px 24px 8px}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:24px;max-width:1200px;margin:0 auto;padding:0 24px 60px}
.article-card{background:var(--bg-card);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.08);border-radius:var(--radius);overflow:hidden;transition:border-color var(--duration) var(--ease),box-shadow var(--duration-slow) var(--ease),transform var(--duration) var(--ease);cursor:pointer;display:flex;flex-direction:column}
.article-card:hover{border-color:var(--accent);box-shadow:0 0 20px rgba(0,191,168,0.15);transform:translateY(-2px)}
.article-body{padding:20px 24px 24px;flex:1;display:flex;flex-direction:column}
.article-meta{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.article-category{display:inline-block;font-size:0.72rem;font-weight:700;padding:3px 10px;border-radius:50px;text-transform:uppercase;letter-spacing:0.5px}
.cat-gaming{background:rgba(0,191,168,0.15);color:var(--accent-light);border:1px solid rgba(0,191,168,0.3)}
.cat-os-news{background:rgba(0,191,168,0.15);color:var(--green);border:1px solid rgba(0,191,168,0.3)}
.cat-software{background:rgba(255,165,0,0.15);color:#ffa500;border:1px solid rgba(255,165,0,0.3)}
.cat-hardware{background:rgba(255,71,87,0.15);color:#ff4757;border:1px solid rgba(255,71,87,0.3)}
.cat-science-tech{background:rgba(0,180,216,0.15);color:#00b4d8;border:1px solid rgba(0,180,216,0.3)}
.cat-security{background:rgba(240,78,78,0.15);color:var(--danger);border:1px solid rgba(240,78,78,0.3)}
.cat-netzwerk-cloud{background:rgba(160,120,255,0.15);color:#a078ff;border:1px solid rgba(160,120,255,0.3)}
.article-new-badge{display:inline-block;font-size:0.68rem;font-weight:700;padding:2px 8px;border-radius:50px;background:var(--green);color:var(--bg);text-transform:uppercase;letter-spacing:0.5px}
.article-date{font-size:0.8rem;color:var(--text-muted);margin-left:auto}
.article-read-time{font-size:0.78rem;color:var(--text-dim)}
.article-body h3{font-size:1.1rem;font-weight:700;letter-spacing:-0.3px;margin-bottom:8px;line-height:1.35;color:var(--text)}
.article-summary{color:var(--text-muted);font-size:0.9rem;line-height:1.6;margin-bottom:16px;flex:1}
.article-footer{display:flex;align-items:center;justify-content:space-between}
.article-tags{display:flex;gap:4px;flex-wrap:wrap}
.article-tag{font-size:0.72rem;color:var(--text-muted);background:var(--surface-2);padding:2px 8px;border-radius:4px}
.article-read-btn{color:var(--accent);font-size:0.88rem;font-weight:600;white-space:nowrap;transition:color var(--duration) var(--ease)}
.article-read-btn:hover{color:var(--text)}
.article-read-btn i{font-size:0.75rem;margin-left:4px}
.blog-no-results{grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--text-muted)}
.blog-no-results i{font-size:3rem;color:var(--border);margin-bottom:16px;display:block}
.article-modal-overlay{display:none;position:fixed;inset:0;z-index:2000;background:rgba(11,25,36,0.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);overflow-y:auto;padding:40px 24px;animation:fadeIn 0.2s ease}
.article-modal-overlay.open{display:block}
.article-modal{max-width:780px;margin:0 auto;background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;animation:slideUp 0.3s ease}
@keyframes slideUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.modal-close{position:fixed;top:20px;right:24px;z-index:2001;background:var(--surface-2);border:1px solid var(--border);color:var(--text);width:40px;height:40px;border-radius:50%;font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--duration) var(--ease)}
.modal-close:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.modal-body{padding:32px}
.modal-meta{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.modal-body h2{font-size:1.8rem;font-weight:800;letter-spacing:-0.5px;margin-bottom:20px;line-height:1.25}
.modal-content{color:var(--text-muted);font-size:1rem;line-height:1.8}
.modal-content p{margin-bottom:16px}
.modal-content h4{color:var(--accent);font-size:1.05rem;font-weight:600;margin:24px 0 10px}
.modal-content ul,.modal-content ol{padding-left:20px;margin-bottom:16px}
.modal-content li{margin-bottom:6px}
.modal-content strong{color:var(--text)}
.modal-source{margin-top:24px;padding-top:16px;border-top:1px solid var(--border);font-size:0.85rem;color:var(--text-muted)}
.modal-source a{color:var(--accent)}
.modal-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:16px}
@media(max-width:768px){
.blog-toolbar{padding:8px 12px;top:56px}
.blog-search{min-width:0;min-width:120px}
.blog-grid{grid-template-columns:1fr;padding:0 16px 40px}
.modal-body{padding:24px 20px}
.modal-body h2{font-size:1.4rem}
.article-modal-overlay{padding:20px 12px}
.blog-count{padding:12px 16px 8px}
}
@media(max-width:480px){
.filter-btn{padding:5px 12px;font-size:0.78rem;min-height:34px}
}
[data-theme="light"] .article-modal-overlay{background:rgba(242,247,248,0.88)}
[data-theme="light"] .blog-toolbar{background:rgba(255,255,255,0.9)}