:root{
  --bg:#0f172a;
  --panel:#111827;
  --muted:#6b7280;
  --text:#e5e7eb;
  --accent:#22c55e;
  --accent-2:#14b8a6;
  --chip:#1f2937;
  --chip-active:#065f46;
  --border:#374151;
  --table-stripe:#0b1225;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif}

.topbar{padding:16px 24px;border-bottom:1px solid var(--border);background:#0b1220;position:sticky;top:0;z-index:10}
.topbar h1{margin:0;font-size:20px}
.subtitle{margin:4px 0 0;color:var(--muted);font-size:12px}

.container{display:grid;grid-template-columns:300px 1fr;gap:16px;padding:16px;align-items:start}
@media (max-width: 920px){.container{grid-template-columns:1fr}}

.filters{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:16px;position:sticky;top:96px}
.filters h2{margin:0 0 8px 0}
.filter-block{margin:16px 0}
.filter-block h3{margin:0 0 8px 0;font-size:14px;color:#cbd5e1}
.price-range,.fps-range{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.filter-block input[type="number"], .filter-block input[type="text"]{
  width:100%;padding:8px 10px;border-radius:8px;border:1px solid var(--border);background:#0b1220;color:var(--text)
}
.checkbox{display:flex;gap:8px;align-items:center;margin:6px 0}
.checkbox input{accent-color:var(--accent)}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  padding:6px 10px;border-radius:999px;background:var(--chip);color:#cbd5e1;border:1px solid var(--border);
  cursor:pointer;font-size:12px;user-select:none
}
.chip.active{background:var(--chip-active);color:#ecfdf5;border-color:#047857}

.filter-actions{display:flex;gap:8px}
button{cursor:pointer;border:none;border-radius:8px;padding:8px 12px;font-weight:600}
.primary{background:var(--accent);color:#052e16}
.secondary{background:#1f2937;color:#e5e7eb;border:1px solid var(--border)}
.ghost{background:transparent;color:#a7f3d0;border:1px dashed #155e75}

.content{display:flex;flex-direction:column;gap:12px}
.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:12px}
.toolbar input[type="search"], .toolbar select{
  background:#0b1220;color:var(--text);border:1px solid var(--border);border-radius:8px;padding:8px 10px
}
.result-count{color:#a7f3d0}

.table-wrapper{overflow:auto;border:1px solid var(--border);border-radius:12px}
table{width:100%;border-collapse:collapse}
thead th{position:sticky;top:0;background:#0b1220;border-bottom:1px solid var(--border);text-align:left;padding:10px;font-size:13px}
tbody td{padding:10px;border-bottom:1px solid #0b1220}
tbody tr:nth-child(odd){background:var(--table-stripe)}
a.link{color:#93c5fd;text-decoration:none}
a.link:hover{text-decoration:underline}

.pagination{display:flex;gap:6px;justify-content:center;padding:8px}
.page-btn{
  background:#0b1220;border:1px solid var(--border);color:var(--text);padding:6px 10px;border-radius:8px
}
.page-btn.active{background:var(--accent-2);color:#022c22;border-color:#0d9488}

.footer{color:var(--muted);text-align:center;padding:24px}
.checkbox-list{max-height:220px;overflow:auto;border:1px solid var(--border);border-radius:8px;padding:8px;background:#0b1220}
.checkbox-list label{display:flex;align-items:center;gap:8px;margin:6px 0}