.banners-filter{display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--layout-spacing)/4);padding:1rem;margin-bottom:1rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.banners-filter-separator{width:1px;height:1.2em;background-color:var(--draw-color-surface);margin:0 .25rem}.banners-filter-spacer{flex:1}.banner-count{font-size:.75rem;color:var(--text-color-surface);opacity:.7}.banner-layout-toggle{display:inline-flex;align-items:center;justify-content:center;padding:4px;color:var(--text-color-surface);background-color:color-mix(in srgb,var(--background-color-surface) 80%,transparent);border:1px solid var(--draw-color-surface);border-radius:4px;cursor:pointer;transition:background-color 150ms ease,color 150ms ease}.banner-layout-toggle .icon{width:1.25rem;height:1.25rem;pointer-events:none}.banner-layout-toggle:hover,.banner-layout-toggle.active{background-color:var(--background-color-primary);border-color:var(--draw-color-primary);color:var(--draw-color-primary)}.banner-disabled-toggle,.banner-validated-toggle{display:inline-flex;align-items:center;justify-content:center;padding:4px;color:var(--text-color-surface);background-color:color-mix(in srgb,var(--background-color-surface) 80%,transparent);border:1px solid var(--draw-color-surface);border-radius:4px;cursor:pointer;transition:background-color 150ms ease,color 150ms ease,border-color 150ms ease}.banner-disabled-toggle .icon,.banner-validated-toggle .icon{width:1.25rem;height:1.25rem;pointer-events:none}.banner-disabled-toggle:hover,.banner-disabled-toggle.active{background-color:var(--background-color-primary);border-color:var(--draw-color-danger);color:var(--draw-color-danger)}.banner-validated-toggle:hover,.banner-validated-toggle.active{background-color:var(--background-color-primary);border-color:var(--draw-color-success);color:var(--draw-color-success)}.banner-filter-tag{display:inline-flex;flex-flow:row nowrap;justify-content:flex-start;align-items:center;margin:0;padding:2px 6px;color:var(--text-color-surface);background-color:color-mix(in srgb,var(--background-color-surface) 80%,transparent);border:1px solid var(--draw-color-surface);border-radius:4px;font-weight:400;line-height:1;text-align:center;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color 150ms ease,color 150ms ease}.banner-filter-tag:hover,.banner-filter-tag.active{background-color:var(--background-color-primary);border-color:var(--draw-color-primary);color:var(--draw-color-primary)}.banners-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem;padding:1rem}.banners-grid.layout-list{display:flex;flex-direction:column}.banner-card{position:relative;cursor:pointer;border-radius:4px;overflow:hidden;background:var(--background-color-secondary);border:2px solid transparent;transition:border-color 150ms ease}.banner-card:hover{border-color:var(--draw-color-primary)}.banner-card:hover .banner-image{transform:scale(1.02)}.banner-card.disabled{border-color:var(--draw-color-danger)}.banner-card.validated{border-color:var(--draw-color-success)}.banner-tags-spacer{flex:1}.banner-tag-status{margin-left:auto}.banner-tag.banner-tag-disabled{background:var(--draw-color-danger);color:#fff}.banner-tag.banner-tag-validated{background:var(--draw-color-success);color:#fff}.banner-image{width:100%;aspect-ratio:1920/1280;object-fit:cover;object-position:center center;display:block;transition:transform 200ms ease}.layout-list .banner-image{aspect-ratio:auto;height:480px}.banner-tags{position:absolute;bottom:0;left:0;right:0;display:flex;flex-wrap:wrap;gap:.25rem;padding:.5rem;background:linear-gradient(transparent,rgba(0,0,0,.7))}.banner-tag{display:inline-flex;align-items:center;gap:.25rem;background:var(--background-color-primary);color:var(--text-color-surface);padding:.125rem .5rem;border-radius:4px;font-size:.75rem}.banner-tag .icon{width:.75rem;height:.75rem}.banner-modal{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center}.banner-modal.active{display:flex}.banner-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.9)}.banner-modal-content{position:relative;max-width:95vw;max-height:95vh;display:flex;flex-direction:column;border-radius:6px;overflow:hidden}.banner-modal-image{max-width:100%;max-height:85vh;object-fit:contain}.banner-modal-meta{display:flex;align-items:center;padding:1rem;background:var(--background-color-primary);color:var(--draw-color-primary);font-size:.875rem}.banner-modal-meta a{color:var(--draw-color-link);text-decoration:none}.banner-modal-meta a:hover{text-decoration:underline}.banner-modal-left{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}.banner-modal-spacer{flex:1;min-width:1rem}.banner-modal-icon{width:1rem;height:1rem;vertical-align:middle}.banner-modal-author,.banner-modal-provider,.banner-modal-tags{display:inline-flex;align-items:center;gap:.25rem;background:var(--background-color-primary);color:var(--draw-color-primary);padding:.125rem .5rem;border-radius:4px;font-size:.75rem;text-decoration:none}.banner-modal-author:hover,.banner-modal-provider:hover,.banner-modal-tags:hover{text-decoration:none;opacity:.8}.banner-modal-id{font-family:monospace;font-weight:600}.banner-modal-dimension,.banner-modal-position,.banner-modal-filesize{font-family:monospace;color:var(--text-color-surface)}.banner-modal-separator{display:inline-flex;align-items:center}.banner-modal-separator .icon{width:.5rem;height:.5rem}.banner-modal-tags-list{display:flex;gap:.25rem}.banner-modal-tag{display:inline-flex;align-items:center;gap:.25rem;background:var(--background-color-primary);color:var(--text-color-surface);padding:.125rem .5rem;border-radius:4px;font-size:.75rem}.banner-modal-tag .icon{width:.75rem;height:.75rem}.banner-modal-tag.banner-modal-tag-disabled{background:var(--draw-color-danger);color:#fff}.banner-modal-tag.banner-modal-tag-validated{background:var(--draw-color-success);color:#fff}