/* Scope all rules under .q3r-wrap to avoid interfering with theme */
.q3r-wrap .q3r-cat-tabs {
  position: sticky;
  top: var(--q3r-sticky-top, 0);
  z-index: 50;
  display: flex;
  gap: .75rem;
  margin: 0 0 1rem;
  overflow-x: auto;
  padding: .25rem .25rem .3rem;
  border-bottom: 1px solid #202f5b;
  background: rgba(32,47,91,.92);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  scrollbar-width: thin;
  box-shadow: 0 1px 0 rgba(0,0,0,.05);
}
.q3r-wrap .q3r-tab {
  appearance: none; background: transparent; border: none;
  padding: .55rem .9rem; margin: 0; font-weight: 600; line-height: 1; cursor: pointer;
  color: #bec3cf; border-bottom: 2px solid transparent; border-radius: 4px;
  transition: background .15s, color .15s, border-color .15s;
}
.q3r-wrap .q3r-tab:hover { color: #ffffff; }
.q3r-wrap .q3r-tab.is-active { color: #ffffff; background: #1151d3; border-bottom-color: #1151d3; }
.q3r-wrap .q3r-tab:focus-visible { outline: 2px solid #1151d3; outline-offset: 2px; border-radius: 4px; }
.q3r-wrap .q3r-tabpanel { margin-top: .5rem; margin-bottom: 2rem; }

.q3r-wrap .q3r-dl-grid { display:grid; gap:1rem; }
.q3r-wrap .q3r-dl-grid.cols-1 { grid-template-columns: 1fr; }
.q3r-wrap .q3r-dl-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.q3r-wrap .q3r-dl-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.q3r-wrap .q3r-dl-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

.q3r-wrap .q3r-card { border:1px solid #e4e7ec; border-radius:14px; overflow:hidden; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.04); display:flex; flex-direction:column; }
.q3r-wrap .q3r-thumb img { display:block; width:100%; height:auto; }
.q3r-wrap .q3r-body { padding:14px; display:flex; flex-direction:column; gap:.5rem; }
.q3r-wrap .q3r-title { margin:0; font-size:1.1rem; }
.q3r-wrap .q3r-desc { color:#4b5563; font-size:.95rem; }

.q3r-wrap .q3r-files { display:flex; flex-wrap:wrap; gap:.5rem; }
.q3r-wrap .q3r-files .q3r-btn { display:inline-flex; align-items:center; gap:.4rem; padding:.5rem .75rem; border:1px solid #d1d5db; border-radius:10px; text-decoration:none; font-weight:600; }
.q3r-wrap .q3r-files .q3r-btn:hover { border-color:#9ca3af; }
.q3r-wrap .q3r-files .q3r-size { font-weight:500; opacity:.75; margin-left:.1rem; font-size:.9em; }
.q3r-wrap .q3r-total { color:#111827; font-size:.9rem; opacity:.9; }

.q3r-wrap .q3r-badge { display:inline-flex; align-items:center; justify-content:center; font-size:.95em; line-height:1; padding:0 .45rem; border-radius:8px; border:1px solid rgba(0,0,0,.08); }
.q3r-wrap .q3r-badge.q3r-win   { background:#edf5ff; }
.q3r-wrap .q3r-badge.q3r-linux { background:#f2f2f2; }
.q3r-wrap .q3r-badge.q3r-mac   { background:#f5f5f7; }
.q3r-wrap .q3r-badge.q3r-all   { background:#eef7ee; }

.q3r-wrap .q3r-dl-table-wrap { overflow:auto; }
.q3r-wrap .q3r-dl-table { width:100%; border-collapse:collapse; }
.q3r-wrap .q3r-dl-table th, .q3r-wrap .q3r-dl-table td { border-bottom:1px solid #e5e7eb; text-align:left; padding:.6rem .5rem; vertical-align:middle; }
.q3r-wrap .q3r-dl-table .q3r-desc { color:#6b7280; font-size:.9rem; }

.q3r-wrap .q3r-dl-table--thumbs .q3r-th-thumb { width:72px; }
.q3r-wrap .q3r-td-thumb { width:72px; }
.q3r-wrap .q3r-thumb-mini { width:64px; height:64px; border-radius:8px; object-fit:cover; display:block; }
.q3r-wrap .q3r-thumb-placeholder { display:inline-block; width:64px; height:64px; border-radius:8px; background:#f8fafc; border:1px dashed #e5e7eb; }

.q3r-wrap .q3r-th-count, .q3r-wrap .q3r-td-count { width:110px; text-align:right; color:#374151; }

.q3r-wrap .q3r-screens-row { display:flex; flex-wrap:wrap; gap:.5rem; margin:.5rem 0 0; }
.q3r-wrap .q3r-screens-row .q3r-shot { display:inline-block; width:90px; height:68px; border-radius:8px; overflow:hidden; border:1px solid #e5e7eb; background:#f8fafc; }
.q3r-wrap .q3r-screens-row .q3r-shot img { width:100%; height:100%; object-fit:cover; display:block; }

/* Lightbox base */
.q3r-lightbox { position:fixed; inset:0; background:rgba(0,0,0,.8); display:none; align-items:center; justify-content:center; z-index:9999; }
.q3r-lightbox.is-open { display:flex; }
.q3r-lightbox__img-wrap { max-width:min(96vw,1400px); max-height:90vh; position:relative; }
.q3r-lightbox__img-wrap img { width:auto; height:auto; max-width:100%; max-height:90vh; display:block; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.4); }

/* === Q3R Theme Lightbox Colors (v0.6.7) === */
.q3r-wrap .q3r-lightbox__close,
.q3r-wrap .q3r-lightbox__prev,
.q3r-wrap .q3r-lightbox__next {
  position:absolute; top:50%; transform:translateY(-50%);
  background: #202f5b;
  color: #bec3cf;
  border:none; border-radius:999px;
  width:44px; height:44px; cursor:pointer; font-size:20px; line-height:44px; text-align:center;
  box-shadow:0 2px 12px rgba(0,0,0,.25);
  transition: background-color .15s, color .15s, transform .15s;
}
.q3r-wrap .q3r-lightbox__close { top:16px; right:16px; transform:none; width:46px; height:46px; font-size:22px; line-height:46px; }
.q3r-wrap .q3r-lightbox__prev { left:-60px; }
.q3r-wrap .q3r-lightbox__next { right:-60px; }
.q3r-wrap .q3r-lightbox__close:hover,
.q3r-wrap .q3r-lightbox__prev:hover,
.q3r-wrap .q3r-lightbox__next:hover {
  background: #1151d3;
  color: #ffffff;
  transform: translateY(-50%) scale(1.08);
}

@media (max-width: 720px) {
  .q3r-wrap .q3r-lightbox__prev { left:10px; }
  .q3r-wrap .q3r-lightbox__next { right:10px; }
}