/* tech.css */
:root {
  --video-opacity: 0.7;
  --accent: #60a5fa;
  --muted: #6b7fa0;
  --text: #c0cce0;
  --topbar-bg: rgba(10,15,26,0.85);
  --topbar-border: rgba(96,165,250,0.1);
  --topbar-hover: rgba(96,165,250,0.05);
}

html { font-size: 17px; }
body { font-family: 'JetBrains Mono', monospace; background: #0a0f1a; color: #c0cce0; }

.bg-grid {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(96,165,250,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(96,165,250,0.03) 1px, transparent 1px);
  background-size: 24px 24px;
}

.filter-btn { font-size: 0.6rem; padding: 0.25rem 0.6rem; border-radius: 100px; border: 1px solid rgba(96,165,250,0.15); background: none; color: #6b7fa0; cursor: pointer; transition: all 0.15s; text-transform: uppercase; letter-spacing: 0.05em; }
.filter-btn:hover, .filter-btn.active { border-color: #60a5fa; color: #60a5fa; }

.feed-item { padding: 0.75rem 0; border-bottom: 1px solid rgba(96,165,250,0.05); }
.feed-item-title { font-size: 0.82rem; font-weight: 500; color: #c0cce0; text-decoration: none; line-height: 1.4; }
.feed-item-title:hover { color: #60a5fa; }
.feed-item-meta { font-size: 0.6rem; color: #6b7fa0; margin-top: 0.25rem; display: flex; gap: 0.75rem; }
.feed-cat { font-size: 0.5rem; padding: 0.1rem 0.35rem; border-radius: 3px; border: 1px solid; text-transform: uppercase; }
.cat-ai { border-color: #a78bfa; color: #a78bfa; }
.cat-devops { border-color: #60a5fa; color: #60a5fa; }
.cat-aws { border-color: #fbbf24; color: #fbbf24; }
.cat-healthtech { border-color: #00e5c0; color: #00e5c0; }

.sidebar-post { padding: 0.6rem 0; border-bottom: 1px solid rgba(96,165,250,0.05); }
.sidebar-post a { font-size: 0.75rem; font-weight: 500; color: #c0cce0; text-decoration: none; line-height: 1.4; }
.sidebar-post a:hover { color: #60a5fa; }
.sidebar-post-date { font-size: 0.55rem; color: #6b7fa0; margin-top: 0.15rem; }

@media (max-width: 800px) {
  .layout { grid-template-columns: 1fr !important; }
  .sidebar { position: static !important; order: 2; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(96,165,250,0.1); }
}