/* 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 0;
  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);
}
/* Sub-Tab-Reihe */
.q3r-wrap .q3r-cat-tabs--sub {
  position: sticky;
  top: calc(var(--q3r-sticky-top, 0px) + var(--q3r-top-tabs-h, 40px));
  z-index: 49;
  gap: .4rem;
  padding: .2rem .4rem .25rem;
  border-bottom: 1px solid #2d3f6e;
  background: rgba(22,34,72,.88);
  margin: 0 0 1rem;
}
.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--sub {
  padding: .38rem .7rem;
  font-size: .9rem;
  font-weight: 500;
}
.q3r-wrap .q3r-tab-arrow { font-size: .8em; opacity: .7; margin-left: .2em; transition: transform .2s; display:inline-block; }
.q3r-wrap .q3r-tab.is-active .q3r-tab-arrow { transform: rotate(180deg); }
.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--sub.is-active { background: #0d3faa; }
.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; }
}

/* New-Badge */
.q3r-wrap .q3r-new-badge {
  display: inline-block; vertical-align: middle;
  background: #16a34a; color: #fff;
  font-size: .65rem; font-weight: 700; letter-spacing: .06em;
  padding: .15em .45em; border-radius: 5px; line-height: 1.4;
  text-transform: uppercase; margin-left: .35rem;
  animation: q3r-pop .35s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes q3r-pop { from { transform:scale(.6); opacity:0; } to { transform:scale(1); opacity:1; } }

/* Live-Suchfeld */
.q3r-wrap .q3r-search-wrap {
  position: relative; display: flex; align-items: center;
  margin-bottom: .75rem;
}
.q3r-wrap .q3r-search-icon {
  position: absolute; left: .75rem; pointer-events: none; font-size: 1rem; opacity: .6;
}
.q3r-wrap .q3r-search-input {
  width: 100%; padding: .55rem .55rem .55rem 2.4rem;
  border: 1px solid #d1d5db; border-radius: 10px;
  font-size: .95rem; background: #fff; color: #111;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}
.q3r-wrap .q3r-search-input:focus {
  outline: none; border-color: #1151d3;
  box-shadow: 0 0 0 3px rgba(17,81,211,.15);
}
.q3r-wrap .q3r-search-clear {
  position: absolute; right: .6rem; background: none; border: none;
  cursor: pointer; font-size: 1rem; color: #9ca3af; padding: .25rem;
  line-height: 1; border-radius: 4px;
}
.q3r-wrap .q3r-search-clear:hover { color: #374151; }
.q3r-wrap .q3r-search-empty {
  padding: 1.5rem; text-align: center; color: #6b7280;
  font-size: .95rem; display: none;
}

/* Clipboard-Button */
.q3r-wrap .q3r-btn-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.q3r-wrap .q3r-copy-btn {
  position: absolute;
  right: -2px;
  top: 50%;
  transform: translateY(-50%) translateX(100%);
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .35rem .6rem;
  background: #1e293b;
  color: #e2e8f0;
  border: none;
  border-radius: 8px;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s, background .15s;
  z-index: 10;
  margin-left: .4rem;
}
/* Sichtbar nur wenn Wrapper gehovered UND nicht gerade am verschwinden */
.q3r-wrap .q3r-btn-wrap:hover .q3r-copy-btn:not(.is-hiding),
.q3r-wrap .q3r-copy-btn.is-copied {
  opacity: 1;
  pointer-events: auto;
}
.q3r-wrap .q3r-copy-btn.is-hiding {
  opacity: 0 !important;
  pointer-events: none !important;
}
.q3r-wrap .q3r-copy-btn:hover { background: #1151d3; color: #fff; }
.q3r-wrap .q3r-copy-btn.is-copied { background: #16a34a; color: #fff; }

/* Browser-natives Clear-Icon bei type="search" unterdrücken */
.q3r-wrap .q3r-search-input::-webkit-search-cancel-button,
.q3r-wrap .q3r-search-input::-webkit-search-decoration { display: none; -webkit-appearance: none; }
