/* Uniquizer chrome on top of Pico */
:root { --pico-font-size: 95%; }
/* Brand accent: indigo instead of default Pico azure. :root[data-theme] matches
   Pico's own :root:not([data-theme=dark]) specificity; app.css loads later. */
:root[data-theme="light"] {
  --pico-primary: #4f46e5; --pico-primary-background: #4f46e5; --pico-primary-border: #4f46e5;
  --pico-primary-hover: #4338ca; --pico-primary-hover-background: #4338ca; --pico-primary-hover-border: #4338ca;
  --pico-primary-underline: rgba(79,70,229,.4); --pico-primary-focus: rgba(79,70,229,.35);
}
:root[data-theme="dark"] {
  --pico-primary: #8b8df2; --pico-primary-background: #5b5bd6; --pico-primary-border: #5b5bd6;
  --pico-primary-hover: #a5a7f5; --pico-primary-hover-background: #6e6ee0; --pico-primary-hover-border: #6e6ee0;
  --pico-primary-underline: rgba(139,141,242,.4); --pico-primary-focus: rgba(139,141,242,.35);
}
.uq-mark { width: 1.05em; height: 1.05em; vertical-align: -0.18em; margin-right: .35rem; }
nav.uq-nav { border-bottom: 1px solid var(--pico-muted-border-color); margin-bottom: 1.5rem; }
nav.uq-nav strong a { text-decoration: none; }
.uq-banner { background: var(--pico-mark-background-color); padding: .4rem 1rem; border-radius: var(--pico-border-radius); margin-bottom: 1rem; display: flex; justify-content: space-between; align-items: center; }
.uq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .8rem; }
.uq-grid figure { margin: 0; }
.uq-grid img, .uq-grid video { background: var(--pico-muted-border-color); min-height: 120px; }
.uq-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--pico-border-radius); }
.uq-grid figcaption { font-size: .72rem; color: var(--pico-muted-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uq-badge { display: inline-block; padding: .05rem .5rem; border-radius: 1rem; font-size: .72rem; background: var(--pico-secondary-background); color: var(--pico-secondary-inverse); }
.uq-badge.ok { background: #2e7d32; }
.uq-badge.warn { background: #c62828; }
.uq-badge.dim { background: var(--pico-muted-border-color); color: var(--pico-color); }
.uq-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .8rem; }
.uq-kpis article { text-align: center; padding: .8rem; margin: 0; }
.uq-kpis h3 { margin: 0; font-size: 1.6rem; }
.uq-kpis small { color: var(--pico-muted-color); }
table.uq-compact { font-size: .82rem; }
table.uq-compact td, table.uq-compact th { padding: .3rem .5rem; }
code.uq-url { font-size: .75rem; word-break: break-all; }
.uq-hero { text-align: center; padding: 3.5rem 0 2rem; }
.uq-hero h1 { font-size: 2.4rem; margin-bottom: .5rem; }
.uq-flash { border-left: 4px solid var(--pico-primary); padding: .5rem .8rem; background: var(--pico-card-background-color); margin-bottom: 1rem; white-space: pre-wrap; font-size: .85rem; }
.uq-drop { border: 2px dashed var(--pico-muted-border-color); border-radius: var(--pico-border-radius); padding: 1.4rem; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.uq-drop:hover { border-color: var(--pico-primary); }
.uq-drop.dragging { border-color: var(--pico-primary); background: var(--pico-mark-background-color); }
.uq-staged { list-style: none; padding: 0; margin: .6rem 0; font-size: .8rem; max-height: 180px; overflow-y: auto; }
.uq-staged li { display: flex; gap: .5rem; align-items: center; padding: .2rem 0; border-bottom: 1px solid var(--pico-muted-border-color); }
.uq-staged li small { color: var(--pico-muted-color); }
.uq-staged li a { margin-left: auto; font-size: .72rem; }
.uq-pager { display: flex; align-items: center; justify-content: center; gap: .9rem; margin: .8rem 0 0; }
.uq-pager button { width: auto; margin: 0; padding: .25rem .8rem; font-size: .8rem; }
.uq-copy { width: auto; margin: 0 0 0 .4rem; padding: .1rem .55rem; font-size: .72rem; vertical-align: middle; }
table.uq-compact button { width: auto; margin: 0 .15rem 0 0; padding: .15rem .55rem; font-size: .72rem; }
nav.uq-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: .35rem; font-weight: 600; }
/* Toggle pairs (variant browser, audit tabs): active = filled, inactive = quiet outline */
button.uq-tab { width: auto; margin: 0 .2rem 0 0; padding: .25rem .8rem; font-size: .8rem; }
button.uq-tab:not(.active) { background: transparent; color: var(--pico-muted-color); border-color: var(--pico-muted-border-color); }
.grid { align-items: start; }
tr.uq-dim td { opacity: .45; }
[x-cloak] { display: none !important; }
.uq-lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(8,10,16,.9); display: flex; align-items: center; justify-content: center; gap: .4rem; }
.uq-lb-body { max-width: 92vw; text-align: center; }
.uq-lb-body img, .uq-lb-body video { max-width: 90vw; max-height: 82vh; object-fit: contain; border-radius: 6px; background: #000; }
.uq-lb-body p { color: #e6e8f0; font-size: .85rem; margin: .6rem 0 0; }
.uq-lb-body p a { color: #aab0ff; }
.uq-lb-nav, .uq-lb-close { background: transparent; border: 0; color: #e6e8f0; font-size: 2.6rem; line-height: 1; width: auto; padding: .4rem .9rem; cursor: pointer; }
.uq-lb-nav:hover, .uq-lb-close:hover { color: #fff; background: transparent; }
.uq-lb-close { position: absolute; top: .6rem; right: 1rem; font-size: 2rem; }
.uq-feedurl { display: flex; align-items: center; gap: .4rem; }
.uq-feedurl code { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .72rem; }