:root {--bg-main: #06090f;--bg-card: rgba(20, 25, 35, 0.6);--border-glass: rgba(255, 255, 255, 0.08);--accent: #38bdf8;--accent-glow: rgba(56, 189, 248, 0.3);--text-main: #f8fafc;--text-muted: #94a3b8;--radius-sm: 10px;--radius-md: 16px;--radius-lg: 24px;--trans: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);}* { box-sizing: border-box; margin: 0; padding: 0; }body {background: var(--bg-main);color: var(--text-main);font-family: 'Inter', system-ui, -apple-system, sans-serif;line-height: 1.5;-webkit-font-smoothing: antialiased;background-image: radial-gradient(circle at 15% 50%, rgba(56, 189, 248, 0.05), transparent 25%),radial-gradient(circle at 85% 30%, rgba(139, 92, 246, 0.05), transparent 25%);background-attachment: fixed;}a { color: inherit; text-decoration: none; transition: var(--trans); }.topbar {position: sticky;top: 0;z-index: 100;background: rgba(6, 9, 15, 0.7);backdrop-filter: blur(16px);-webkit-backdrop-filter: blur(16px);border-bottom: 1px solid var(--border-glass);}.wrap { max-width: 1400px; margin: 0 auto; padding: 0 20px; }.topbar__inner { display: flex; justify-content: space-between; align-items: center; height: 70px; }.brand { font-size: 22px; font-weight: 800; color: var(--accent); letter-spacing: -0.5px; }.nav { display: flex; gap: 8px; }.nav__a { padding: 8px 16px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; color: var(--text-muted); }.nav__a:hover, .nav__a.is-active { background: var(--border-glass); color: var(--text-main); }.toolbar {display: flex; gap: 12px; flex-wrap: wrap; margin: 30px 0 20px;background: var(--bg-card); padding: 16px; border-radius: var(--radius-md);border: 1px solid var(--border-glass); backdrop-filter: blur(10px);}.input, .select {background: rgba(0, 0, 0, 0.3); border: 1px solid var(--border-glass);color: var(--text-main); padding: 10px 16px; border-radius: var(--radius-sm);font-size: 14px; outline: none; transition: var(--trans);flex: 1; min-width: 150px;}.input:focus, .select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }.select { cursor: pointer; appearance: none; background-image: url('data:image/svg+xml;utf8,<svg fill="%2394a3b8" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5H7z"/></svg>'); background-repeat: no-repeat; background-position: right 10px center; background-size: 20px; }.grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));gap: 20px; margin-top: 20px;}.card {background: var(--bg-card); border: 1px solid var(--border-glass);border-radius: var(--radius-md); overflow: hidden;transition: var(--trans); position: relative;display: flex; flex-direction: column;}.card:hover {transform: translateY(-5px);border-color: var(--accent);box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 15px var(--accent-glow);}.card__thumb-wrap { position: relative; aspect-ratio: 4/3; overflow: hidden; background: #000; }.card__thumb { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }.card:hover .card__thumb { transform: scale(1.05); }.live-indicator {position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,0.6);backdrop-filter: blur(4px); padding: 4px 8px; border-radius: 20px;font-size: 11px; font-weight: 700; color: #22c55e;display: flex; align-items: center; gap: 5px; border: 1px solid rgba(34, 197, 94, 0.3);}.live-indicator::before {content: ''; display: block; width: 6px; height: 6px; background: #22c55e;border-radius: 50%; box-shadow: 0 0 8px #22c55e;animation: pulse 1.5s infinite;}@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }.card__body { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }.card__title { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }.badge {font-size: 11px; font-weight: 500; color: var(--text-muted);background: rgba(255,255,255,0.05); padding: 4px 10px;border-radius: 20px; border: 1px solid var(--border-glass);display: flex; align-items: center; gap: 4px;}.badge:hover { background: rgba(255,255,255,0.1); color: var(--text-main); }.pager {display: flex; gap: 8px; align-items: center; justify-content: center;margin: 40px 0; padding: 16px; background: var(--bg-card);border-radius: var(--radius-md); border: 1px solid var(--border-glass);}.pager .btn { padding: 8px 16px; background: rgba(255,255,255,0.05); border: 1px solid var(--border-glass); border-radius: var(--radius-sm); transition: var(--trans); font-size: 14px; font-weight: 500;}.pager .btn:hover { background: var(--accent); color: #000; border-color: var(--accent); }.pager .muted { font-size: 14px; }