.tv-container { max-width: 900px; margin: 20px auto; }
.tv-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.tv-filter-btn { padding: 6px 14px; background: #f0f0f0; color: #333; border-radius: 20px; text-decoration: none; font-size: 13px; transition: all 0.2s; border: 1px solid #ddd; }
.tv-filter-btn:hover { background: #e0e0e0; color: #000; }
.tv-filter-btn.active { background: #0073aa; color: #fff; border-color: #0073aa; }
.tv-cat-title { font-size: 16px; color: #0073aa; margin: 20px 0 10px; padding-bottom: 6px; border-bottom: 1px solid #ddd; }
.tv-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 20px; table-layout: fixed; }
.tv-table th { background: #f9f9f9; color: #333; padding: 10px 12px; text-align: left; font-weight: 600; border-bottom: 2px solid #ddd; }
.tv-table td { padding: 8px 12px; border-bottom: 1px solid #eee; vertical-align: middle; word-wrap: break-word; }
.tv-row { transition: background 0.2s; }
.tv-row:hover { background: #f5f5f5; }
.tv-working { border-left: 3px solid #46b450; }
.tv-broken  { border-left: 3px solid #dc3232; }
.tv-neutral { border-left: 3px solid #ccc; }
.tv-col-pos { width: 40px; }
.tv-col-code { width: 25%; }
.tv-col-code code { background: #f0f0f0; padding: 2px 6px; border-radius: 3px; font-size: 12px; color: #d54e21; }
.tv-col-name { width: 25%; }
.tv-col-votes { width: 110px; text-align: center; }
.tv-count-working { color: #46b450; font-weight: 700; }
.tv-count-broken  { color: #dc3232; font-weight: 700; }
.tv-col-actions { width: 100px; text-align: center; }
.tv-btn { padding: 5px 10px; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; font-weight: 700; transition: opacity 0.2s; }
.tv-btn:disabled { opacity: 0.5; cursor: default; }
.tv-btn-work    { background: #46b450; color: #fff; }
.tv-btn-work:hover    { background: #3a9a42; }
.tv-btn-broken  { background: #dc3232; color: #fff; }
.tv-btn-broken:hover  { background: #b71c1c; }
.tv-empty { text-align: center; color: #999; padding: 40px; }

/* Мобильные */
@media (max-width: 600px) {
    .tv-container { padding: 0 8px; }
    .tv-table { font-size: 12px; display: block; }
    .tv-table thead { display: none; }
    .tv-table tbody { display: block; width: 100%; }
    .tv-row { display: flex; flex-wrap: wrap; padding: 8px 4px; border-bottom: 1px solid #eee; gap: 4px; }
    .tv-col-pos { width: auto; font-size: 11px; color: #999; }
    .tv-col-code { width: 100%; order: 1; }
    .tv-col-code code { font-size: 14px; display: block; margin-top: 2px; }
    .tv-col-name { width: 100%; order: 2; font-size: 14px; }
    .tv-col-votes { width: auto; order: 3; font-size: 13px; }
    .tv-col-actions { width: auto; order: 4; margin-left: auto; }
    .tv-btn { padding: 6px 12px; font-size: 16px; }
    .tv-filters { gap: 4px; }
    .tv-filter-btn { padding: 5px 10px; font-size: 12px; }
}