:root {
  --ux-focus: #8bdcff;
  --ux-surface-soft: rgba(25, 28, 39, 0.96);
  --ux-line: rgba(255, 255, 255, 0.18);
  --ux-muted: #b6becd;
}

html { scroll-padding-top: 84px; }
body {
  height: auto !important;
  min-height: 100dvh;
  overflow: visible !important;
  grid-template-rows: auto minmax(0, 1fr);
}
body > header { position: sticky; top: 0; }
body > aside {
  position: sticky;
  top: 73px;
  align-self: start;
  height: calc(100dvh - 73px);
}
body > main { overflow: visible !important; min-width: 0; }
button, input, select, .asset-card, .modal-action-btn { min-height: 44px; }
button:focus-visible,
input:focus-visible,
select:focus-visible,
a:focus-visible,
.asset-card:focus-visible,
.tag-pill:focus-visible,
[tabindex="0"]:focus-visible {
  outline: 3px solid var(--ux-focus) !important;
  outline-offset: 3px;
}

.ux-skip-link {
  position: fixed;
  z-index: 10000;
  top: 8px;
  left: 8px;
  padding: 11px 15px;
  border-radius: 10px;
  background: #fff;
  color: #071015;
  font-weight: 800;
  transform: translateY(-160%);
}
.ux-skip-link:focus { transform: translateY(0); }

.ux-filter-open {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--ux-line);
  border-radius: 10px;
  background: var(--ux-surface-soft);
  color: #fff;
  padding: 8px 13px;
  cursor: pointer;
  font-weight: 800;
}

.control-panel {
  position: sticky;
  top: 82px;
  z-index: 30;
  gap: 14px;
  background: rgba(9, 10, 15, 0.94) !important;
  backdrop-filter: blur(18px);
}
.active-filters-row { min-width: 0; flex: 1; }
.ux-results-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 12px;
  align-items: center;
  color: var(--ux-muted);
  font-size: 0.85rem;
}
.ux-results-summary strong { color: #fff; font-size: 0.95rem; }
.filter-chip { min-height: 34px; }
.filter-chip-remove { min-width: 30px; min-height: 30px; border-radius: 50%; text-decoration: none; }
.clear-filters-btn { min-height: 36px; padding: 4px 10px; border: 1px solid var(--ux-line) !important; border-radius: 8px; text-decoration: none !important; }

.asset-card {
  cursor: pointer !important;
  contain-intrinsic-size: auto 390px !important;
}
.asset-card:hover { transform: translateY(-2px) !important; }
.asset-thumb-container { aspect-ratio: 4 / 3 !important; }
.asset-thumb { object-position: center; }
.asset-info { gap: 9px !important; }
.asset-title { height: auto !important; min-height: 2.6rem; }
.asset-targets { height: auto !important; min-height: 22px; }

#ux-filter-dialog {
  max-width: 620px;
  width: calc(100% - 20px);
  max-height: calc(100dvh - 20px);
  overflow: hidden;
  border-radius: 18px;
}
#ux-filter-dialog .ux-filter-shell { display: flex; max-height: calc(100dvh - 20px); flex-direction: column; }
#ux-filter-dialog .ux-filter-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; border-bottom: 1px solid var(--ux-line); }
#ux-filter-dialog .ux-filter-head h2 { margin: 0; font-size: 1.1rem; }
#ux-filter-dialog .ux-filter-head button { min-width: 44px; border: 1px solid var(--ux-line); border-radius: 9px; background: var(--ux-surface-soft); color: #fff; cursor: pointer; }
#ux-filter-dialog aside {
  display: flex !important;
  position: static !important;
  width: auto;
  height: auto;
  max-height: none;
  overflow-y: auto;
  border: 0;
  background: transparent;
}
.ux-filter-footer { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--ux-line); }
.ux-filter-footer button { flex: 1; padding: 9px 12px; border: 1px solid var(--ux-line); border-radius: 9px; background: var(--ux-surface-soft); color: #fff; cursor: pointer; font-weight: 800; }
.ux-filter-footer .primary { border-color: var(--accent); background: var(--accent); color: #061014; }

.ux-empty-state { grid-column: 1 / -1; padding: 48px 20px; border: 1px dashed var(--ux-line); border-radius: 15px; text-align: center; color: var(--ux-muted); }

@media (max-width: 980px) {
  .control-panel { top: 126px; align-items: stretch; flex-direction: column; }
}

@media (max-width: 800px) {
  body { display: block !important; }
  body > header { position: sticky; top: 0; }
  body > aside { display: none !important; }
  body > main { padding: 14px !important; }
  .ux-filter-open { display: inline-flex; }
  .db-status { display: none !important; }
  .control-panel { position: static; padding: 12px !important; }
  .sort-container { justify-content: space-between; }
  .asset-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important; gap: 12px !important; }
  .hero-banner { padding: 1.25rem !important; }
}

@media (max-width: 420px) {
  .asset-grid { grid-template-columns: 1fr !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}