.tqq-grid-wrap { margin: 20px auto; }
.tqq-grid-widget { padding: 16px 0 20px; position: relative; }
.tqq-grid-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 2px solid #f5f6f8; }
.tqq-grid-title { margin: 0; font-size: 18px; font-weight: 700; color: #222; display: flex; align-items: center; gap: 8px; }
.tqq-grid-title i { color: #fff; background: linear-gradient(135deg,#4fb7dd,#2596be); width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }

.tqq-grid-filter { position: relative; }
.tqq-filter-toggle { width: 34px; height: 34px; border-radius: 50%; border: 1px solid #e88a00; background: #fff; color: #e88a00; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.tqq-filter-toggle:hover { background: #e88a00; color: #fff; }
.tqq-filter-panel { display: none; position: absolute; right: 0; top: 42px; background: #fff; border: 1px solid #e2e8f0; border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.12); padding: 10px; width: 220px; z-index: 20; max-height: 360px; overflow-y: auto; }
.tqq-grid-filter.open .tqq-filter-panel { display: block; }
.tqq-filter-panel-label { font-size: 11px; font-weight: 700; text-transform: uppercase; color: #999; margin: 8px 0 4px; }
.tqq-filter-panel-label:first-child { margin-top: 0; }
.tqq-filter-opt { display: block; width: 100%; text-align: left; background: transparent; border: none; padding: 7px 8px; border-radius: 4px; font-size: 13px; color: #444; cursor: pointer; }
.tqq-filter-opt:hover { background: #f1f5f9; color: #e88a00; }
.tqq-filter-opt.active { background: #e88a00; color: #fff; font-weight: 600; }
.tqq-filter-genre-list { display: flex; flex-direction: column; }

.tqq-grid-cards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px 12px; }
@media (max-width: 1200px) { .tqq-grid-cards { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 992px)  { .tqq-grid-cards { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px)  { .tqq-grid-cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px)  { .tqq-grid-cards { grid-template-columns: repeat(2, 1fr); } }

.tqq-grid-empty { grid-column: 1 / -1; padding: 20px; text-align: center; color: #888; }

.tqq-grid-pagination-wrap { margin-top: 18px; display: flex; justify-content: center; }
.tqq-grid-pagination { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: center; }
.tqq-page-btn { min-width: 34px; height: 34px; padding: 0 8px; border: 1px solid #e2e8f0; background: #fff; border-radius: 4px; font-size: 13px; color: #444; cursor: pointer; }
.tqq-page-btn:hover:not([disabled]) { border-color: #e88a00; color: #e88a00; }
.tqq-page-btn.active { background: #2563eb; border-color: #2563eb; color: #fff; }
.tqq-page-btn[disabled] { opacity: .4; cursor: default; }
.tqq-page-ellipsis { padding: 0 4px; color: #999; }

.tqq-grid-widget.tqq-loading .tqq-grid-body { opacity: .5; pointer-events: none; }