.set-card { transition: box-shadow .15s ease, border-color .15s ease; }
.set-card:hover { border-color: var(--bs-primary); box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .45); }
/* Set images are JPGs on white backgrounds, so they sit on a white panel even
in dark mode (a dark panel would show a white box around each photo). */
.set-thumb {
aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
background: #fff; overflow: hidden; border-bottom: 1px solid var(--bs-border-color);
}
.set-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.set-thumb-lg { border-bottom: 0; }
.swatch {
display: inline-block; width: .9em; height: .9em; border-radius: 2px;
border: 1px solid var(--bs-border-color); vertical-align: -.1em;
}
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: block; }
/* Part thumbnails in the set parts table. Rebrickable part renders are on white,
so they get a white tile like the set images. Hover zooms the tile in place. */
.part-thumb-cell { width: 3.25rem; }
.part-thumb {
display: flex; align-items: center; justify-content: center;
width: 2.75rem; height: 2.75rem; border-radius: .25rem;
background: #fff; border: 1px solid var(--bs-border-color); overflow: hidden;
transition: transform .12s ease; transform-origin: left center; position: relative;
}
.part-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.part-thumb[data-pop], .filter-chip-img[data-pop] { cursor: zoom-in; } /* hover: the picture at its own size (static/app.js) */
/* Minifig cards on the set page: white image tile (renders are on white), with
a quantity badge in the corner when the set includes more than one. */
.minifig-thumb {
position: relative; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
background: #fff; border-bottom: 1px solid var(--bs-border-color);
border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0;
}
.minifig-thumb img { max-width: 92%; max-height: 92%; object-fit: contain; }
.minifig-qty { position: absolute; top: .4rem; right: .4rem; }
/* Catalog image fallback (templates/_macros.html + static/app.js): the placeholder
icon only shows once the box has no ![]()
, i.e. no URL or the image failed to load. */
.img-placeholder { display: none; }
.img-box:not(:has(> img)) { background: transparent; }
.img-box:not(:has(> img)) > .img-placeholder { display: inline-block; }
.htmx-request .spinner-border.htmx-indicator { display: inline-block; } /* inline in buttons */
/* Theme picker (Tom Select, static/catalog.js). Its Bootstrap 5 stylesheet ships
light-theme colors, so map them onto Bootstrap's theme variables (dark mode). */
.ts-wrapper .ts-control, .ts-wrapper.single.input-active .ts-control, .ts-dropdown,
.ts-wrapper.single .ts-control { background: var(--bs-body-bg); color: var(--bs-body-color); border-color: var(--bs-border-color); }
.ts-wrapper .ts-control input { color: var(--bs-body-color); }
.ts-wrapper .ts-control input::placeholder { color: var(--bs-secondary-color); }
.ts-wrapper.focus .ts-control { border-color: var(--bs-primary); box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25); }
.ts-dropdown { box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .5); }
.ts-dropdown .ts-dropdown-content { max-height: 22rem; }
.ts-dropdown .option.active { background: var(--bs-tertiary-bg); color: var(--bs-body-color); }
.ts-dropdown .option.selected { background: rgba(var(--bs-primary-rgb), .18); }
.ts-dropdown .no-results { padding: .5rem .75rem; color: var(--bs-secondary-color); }
.ts-wrapper .clear-button { color: var(--bs-secondary-color); }
.theme-opt { display: flex; justify-content: space-between; gap: .75rem; padding-left: calc(var(--depth, 0) * 1rem); }
.theme-opt-parent { color: var(--bs-secondary-color); font-size: .85em; }
.theme-opt-count { color: var(--bs-secondary-color); font-size: .85em; font-variant-numeric: tabular-nums; }
.ts-wrapper.single .ts-control { flex-wrap: nowrap; }
.ts-wrapper.single .ts-control .item { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-dropdown .highlight { background: rgba(var(--bs-warning-rgb), .3); color: inherit; border-radius: 2px; }
/* Active-filter chip on the catalog page ("Sets with ×"). */
.filter-chip {
display: inline-flex; align-items: center; gap: .5rem; padding: .25rem .5rem .25rem .25rem;
border: 1px solid var(--bs-border-color); border-radius: 2rem; background: var(--bs-tertiary-bg); font-size: .9rem;
}
.filter-chip-img {
display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem;
border-radius: 50%; background: #fff; overflow: hidden;
}
.filter-chip-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.filter-chip-close { font-size: .65rem; }
/* Corner badges over a set card's image (e.g. "★ 3 exclusive" minifigs). */
.set-thumb { position: relative; }
.card-badges { position: absolute; top: .4rem; left: .4rem; right: .4rem; display: flex; flex-wrap: wrap; gap: .25rem; }
.card-badges .badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; } /* shorten, never cut off */
/* Retail prices by region on the set page: region name in a fixed-width column so prices line up */
.retail-prices li { display: flex; gap: .75rem; }
.retail-prices li > span:first-child { min-width: 4.5rem; }
/* Market value (New / Used) on the set page: condition in a fixed-width column */
.market-values li { display: flex; gap: .75rem; }
.market-avg { margin-bottom: .15rem; }
.market-values li > span:first-child { min-width: 4.5rem; }
/* ---------------------------------------------------------------- My Inventory */
.inv-thumb {
width: 4.5rem; height: 3.4rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
background: #fff; border-radius: .25rem; border: 1px solid var(--bs-border-color); overflow: hidden;
}
.inv-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.inv-card { transition: border-color .15s ease; }
.inv-card:hover { border-color: var(--bs-primary); }
.collage { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--bs-border-color);
border-bottom: 1px solid var(--bs-border-color); }
.collage > div { aspect-ratio: 4 / 3; background: #fff; display: flex; align-items: center; justify-content: center; }
.collage > div:not(:has(img)):not(.img-box) { background: var(--bs-tertiary-bg); }
.collage img { max-width: 92%; max-height: 92%; object-fit: contain; }
.qty { width: 4.5rem; }
.inv-table td { vertical-align: middle; }
.val-grid { display: grid; grid-template-columns: auto 1fr; gap: .1rem .75rem; font-size: .875rem; }
.val-grid dt { font-weight: 400; color: var(--bs-secondary-color); }
.val-grid dd { margin: 0; text-align: right; font-weight: 600; }
.money { font-variant-numeric: tabular-nums; }
/* barcode scanner status + recent scans */
.scanner-status {
display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; padding: .2rem .6rem;
border-radius: 1rem; background: rgba(25, 135, 84, .12); border: 1px solid rgba(25, 135, 84, .45);
}
.scanner-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--bs-success); animation: pulse 1.6s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.scan-new { animation: flash 1.2s ease-out 1; }
@keyframes flash { from { background: rgba(25, 135, 84, .35); } to { background: transparent; } }
.scanner-status.busy { background: rgba(13, 202, 240, .12); border-color: rgba(13, 202, 240, .45); }
/* camera views (barcode + receipt photos) */
.camera-view { position: relative; aspect-ratio: 4 / 3; background: #111; border-radius: .5rem; overflow: hidden; }
.camera-view video { width: 100%; height: 100%; object-fit: cover; display: block; }
.camera-target {
position: absolute; left: 12%; right: 12%; top: 34%; height: 32%;
border: 3px solid rgba(255, 255, 255, .9); border-radius: .5rem; box-shadow: 0 0 0 999px rgba(0, 0, 0, .45);
}
.camera-target.hit { border-color: var(--bs-success); }
.camera-line {
position: absolute; left: 4%; right: 4%; height: 2px; background: #ff3b3b;
box-shadow: 0 0 8px #ff3b3b; animation: sweep 1.8s ease-in-out infinite alternate;
}
@keyframes sweep { from { top: 10%; } to { top: 88%; } }
.camera-hint {
position: absolute; left: 0; right: 0; bottom: .6rem; text-align: center; color: #fff;
font-size: .85rem; text-shadow: 0 1px 3px #000;
}
.receipt-frame {
position: absolute; left: 20%; right: 20%; top: 6%; bottom: 14%;
border: 3px dashed rgba(255, 255, 255, .9); border-radius: .4rem; box-shadow: 0 0 0 999px rgba(0, 0, 0, .35);
}
.shutter {
width: 3.5rem; height: 3.5rem; border-radius: 50%; background: #fff;
border: .3rem solid var(--bs-secondary-bg); outline: 2px solid #fff;
}
.shutter:hover { background: #ddd; }
.shutter:disabled { opacity: .4; }
/* receipts */
.receipt-drop {
display: flex; align-items: center; gap: .75rem; padding: .6rem .9rem; cursor: pointer; margin: 0;
border: 1px dashed var(--bs-border-color); border-radius: .375rem; font-size: .875rem;
}
.receipt-drop:hover, .receipt-drop.dragover { border-color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .06); }
.receipt-chip {
display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; padding: .2rem .5rem;
border: 1px solid var(--bs-border-color); border-radius: 1rem; background: var(--bs-tertiary-bg); max-width: 100%;
}
.receipt-chip .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14rem; }
.receipt-preview {
background: #d9d9d9; border-radius: .375rem; padding: .5rem; display: flex; justify-content: center;
align-items: center; min-height: 12rem; max-height: 22rem; overflow: hidden; text-decoration: none; color: #333;
}
.receipt-preview img { max-width: 100%; max-height: 21rem; object-fit: contain; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.receipt-pdf { text-align: center; font-size: .9rem; }
.receipt-strip { display: flex; flex-wrap: wrap; gap: .4rem; }
.receipt-thumb {
position: relative; width: 3.2rem; height: 4rem; display: flex; flex-direction: column; align-items: center;
justify-content: center; font-size: 1.2rem; color: #333; background: #eee; overflow: visible;
border: 2px solid transparent; border-radius: .3rem; padding: 0;
}
.receipt-thumb img { max-width: 100%; max-height: 100%; object-fit: cover; border-radius: .2rem; }
.receipt-thumb span { font-size: .6rem; font-weight: 700; }
.receipt-thumb.active { border-color: var(--bs-primary); }
.receipt-thumb .btn-close {
position: absolute; top: -.4rem; right: -.4rem; background-color: #fff; border-radius: 50%;
padding: .25rem; opacity: 1; font-size: .6rem;
}
/* Set page: every building-instruction PDF (description = link) */
.instruction-list li { padding: .15rem 0; }
.instruction-list a { word-break: break-word; }
/* ---------------------------------------------------------------- My Saved Search */
.chip {
display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; padding: .15rem .55rem;
border: 1px solid var(--bs-border-color); border-radius: 1rem; background: var(--bs-tertiary-bg); max-width: 100%;
}
.chip b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.search-card { transition: border-color .15s ease; }
.search-card:hover { border-color: var(--bs-primary); }
.thumb-strip { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)) auto; gap: 4px; align-items: center; text-decoration: none; }
.thumb-strip > div {
aspect-ratio: 4 / 3; background: #fff; border-radius: .25rem; display: flex; align-items: center;
justify-content: center; overflow: hidden; border: 1px solid var(--bs-border-color);
}
.thumb-strip img { max-width: 100%; max-height: 100%; object-fit: contain; }
.thumb-more { font-size: .8rem; color: var(--bs-secondary-color); padding-left: .25rem; }
.builder-section { border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: 1rem; }
.builder-section h2 { font-size: .95rem; margin-bottom: .75rem; }
.toggle-chip input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-chip span {
display: inline-block; font-size: .8rem; padding: .2rem .6rem; border-radius: 1rem; cursor: pointer;
border: 1px solid var(--bs-border-color);
}
.toggle-chip input:checked + span { background: rgba(var(--bs-primary-rgb), .2); border-color: var(--bs-primary); }
.toggle-chip input:focus-visible + span { outline: 2px solid var(--bs-primary); outline-offset: 1px; }
.toggle-chip small { color: var(--bs-secondary-color); }
/* Browse Catalog's Packaging toggles: as tall as the year boxes beside them, centered */
.pack-toggles { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; min-height: calc(1.5em + .75rem + 2px); }
.range { display: flex; align-items: center; gap: .4rem; }
.range .form-control, .range .form-select { min-width: 0; }
.match-bar {
position: sticky; bottom: 0; z-index: 10; background: var(--bs-body-bg);
border-top: 1px solid var(--bs-border-color); box-shadow: 0 -.5rem 1rem rgba(0, 0, 0, .35);
}
.ts-wrapper.multi .ts-control > .item { background: rgba(var(--bs-primary-rgb), .2); color: var(--bs-body-color);
border: 1px solid rgba(var(--bs-primary-rgb), .5); border-radius: .25rem; }
.ts-wrapper.multi .ts-control > .item .remove { border-left-color: rgba(var(--bs-primary-rgb), .5); }
.owned { font-size: .78rem; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; }
.list-thumb { width: 4rem; height: 3rem; background: #fff; border-radius: .25rem; display: flex; align-items: center;
justify-content: center; overflow: hidden; }
.list-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sort-link { color: inherit; text-decoration: none; white-space: nowrap; }
.sort-link:hover { color: var(--bs-primary); }
.sort-arrow { font-size: .7em; color: var(--bs-primary); }
.results[data-view="list"] .view-grid, .results:not([data-view="list"]) .view-list { display: none; }
/* navbar: labels stay on one line (the menu collapses below 768 px) */
.navbar .nav-link, .navbar .text-body-secondary { white-space: nowrap; }
/* Set thumbnails in lists (Saved search list view, My Inventory): large photo on hover (static/app.js) */
[data-large] { cursor: zoom-in; }
.thumb-pop {
position: fixed; z-index: 1080; display: none; pointer-events: none; width: 22rem; max-width: calc(100vw - 16px);
background: #fff; border-radius: .5rem; padding: .5rem; box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .6);
}
.thumb-pop.show { display: block; }
.thumb-pop img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
.thumb-pop-caption { color: #333; font-size: .8rem; text-align: center; padding-top: .25rem; }
/* Admin > Retail prices */
.retail-url { display: inline-block; max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
vertical-align: bottom; }
.store-card { border: 1px solid var(--bs-border-color); border-radius: .5rem; }
/* Saved search export: "Preparing your PDF…" panel (static/searches.js) */
.export-panel { position: fixed; right: 1rem; bottom: 1rem; z-index: 1090; width: min(24rem, calc(100vw - 2rem)); }
/* times (2026-09-27 14:05:09, templating.timestamp) never break across lines */
time[data-local] { white-space: nowrap; }
/* Admin > Sync jobs */
.job-card { border: 1px solid var(--bs-border-color); border-radius: .5rem; height: 100%; display: flex; flex-direction: column; }
.job-card.running { border-color: var(--bs-primary); box-shadow: 0 0 0 1px var(--bs-primary) inset; }
.job-head { padding: .75rem .75rem .25rem; }
.job-body { padding: 0 .75rem .5rem; flex-grow: 1; }
.job-foot { padding: .5rem .75rem; border-top: 1px solid var(--bs-border-color); display: flex; gap: .5rem; align-items: center; }
.job-kv { display: grid; grid-template-columns: auto 1fr; gap: .1rem .6rem; }
.job-kv dt { font-weight: normal; color: var(--bs-secondary-color); }
.job-kv dd { margin: 0; min-width: 0; }
/* Sync jobs' tabs: the job count, and a dot when a job in the tab is running or queued (blue) or failed (red) */
.job-tabs .nav-link { display: flex; align-items: center; gap: .35rem; }
.job-tabs .count { font-size: .75rem; color: var(--bs-secondary-color); }
.tab-dot { width: .5rem; height: .5rem; border-radius: 50%; display: inline-block; }
.tab-dot.running { background: var(--bs-primary); animation: tab-pulse 1.2s infinite; }
.tab-dot.failed { background: var(--bs-danger); }
@keyframes tab-pulse { 50% { opacity: .35; } }
.job-usage { height: .35rem; }
.job-spin { width: .6rem; height: .6rem; border-width: .15em; }
.job-log, .job-report, .job-cmd { background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); border-radius: .375rem;
font-family: ui-monospace, Consolas, monospace; font-size: .72rem; padding: .5rem; white-space: pre-wrap; word-break: break-word; }
.job-log { max-height: 9rem; overflow: auto; }
.job-report { max-height: 24rem; overflow: auto; }
.job-row { cursor: pointer; }
/* My Inventory > Dashboard */
.dash-stat { border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: .75rem; height: 100%; }
.dash-stat .label { font-size: .8rem; color: var(--bs-secondary-color); }
.dash-stat .value { font-size: 1.45rem; font-weight: 600; }
.dash-stat .sub { font-size: .78rem; color: var(--bs-secondary-color); }
.chart-card { border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: .75rem; height: 100%; }
.chart-card h2 { font-size: .95rem; margin: 0; }
.chart-card .chart { width: 100%; height: 300px; }
.chart-card .chart.tall { height: 340px; }
.chart-card .note { font-size: .75rem; color: var(--bs-secondary-color); }
.seg .btn { font-size: .75rem; padding: .1rem .5rem; }
/* the drill-down table: header and total stay put while the rows scroll */
.drill-table thead th { position: sticky; top: 0; z-index: 2; background: var(--bs-body-bg); box-shadow: inset 0 -1px var(--bs-border-color); white-space: nowrap; }
.drill-table tfoot td { position: sticky; bottom: 0; z-index: 2; background: var(--bs-tertiary-bg); box-shadow: inset 0 1px var(--bs-border-color); }
.drill-table th[data-sort] { cursor: pointer; user-select: none; }
.drill-table th .bi { font-size: .7rem; }
.drill-table tr > :first-child { padding-left: .75rem; }
.drill-table tr > :last-child { padding-right: .75rem; }
@media (max-width: 767.98px) {
.drill-table .wide { display: none; }
.drill-table tr > :nth-child(2) { padding-left: .75rem; }
.drill-table tr > :nth-child(10) { padding-right: .75rem; }
}
@media (min-width: 768px) { .drill-table .narrow { display: none; } }
/* Admin > Edit set info (templates/admin/catalog_edit.html) */
.ov-table td { vertical-align: middle; }
.ov-table .imported { color: var(--bs-secondary-color); }
.ov-table tr.is-over > td { background: rgba(255, 193, 7, .06); }
.ov-table .form-control, .ov-table .form-select { min-width: 3.5rem; }
.ov-table .input-group { flex-wrap: nowrap; }
.ov-table .form-control::placeholder { opacity: .45; } /* the imported value, as a hint: not a typed value */
.edited { font-size: .65rem; vertical-align: middle; }
.edit-thumb { width: 5rem; height: 3.75rem; }
.pic-card, .fig-card { border: 1px solid var(--bs-border-color); border-radius: .5rem; }
.pic { width: 9rem; height: 6.75rem; border: 2px solid transparent; }
.pic.fig { width: 4.5rem; height: 4.5rem; flex-shrink: 0; }
.pic.uploaded { border-color: var(--bs-warning); }
.edit-thumb, .pic { background: #fff; border-radius: .375rem; display: flex; align-items: center;
justify-content: center; overflow: hidden; }
.edit-thumb img, .pic img { max-width: 100%; max-height: 100%; object-fit: contain; }
.fig-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: .5rem; }
.min-w-0 { min-width: 0; }
.set-list tr[data-href] { cursor: pointer; }
/* Catalog edits: the bigger picture shown while hovering a thumbnail (static/admin.js) */
.thumb-preview { position: fixed; z-index: 1080; display: none; pointer-events: none; width: 22rem; max-width: 90vw;
padding: .5rem; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .5rem;
box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .5); }
.thumb-preview.show { display: block; }
.thumb-preview img { display: block; width: 100%; height: 15rem; object-fit: contain; background: #fff; border-radius: .375rem; }
.thumb-preview-title { font-size: .8rem; margin-top: .35rem; color: var(--bs-secondary-color); }
@media (hover: none) { .thumb-preview { display: none !important; } } /* touch screens: tap opens the set instead */
/* Set page: the description (admins only for now), cut to ~8 lines until "Show more" (static/app.js) */
.set-description { max-width: 52rem; }
.set-description .desc-body { position: relative; }
.set-description.clamped .desc-body { max-height: 12.5rem; overflow: hidden; }
.set-description.clamped .desc-body::after { content: ""; position: absolute; inset: auto 0 0 0; height: 4rem;
background: linear-gradient(transparent, var(--bs-body-bg)); }
.set-description p { margin-bottom: .6rem; }
.set-description ul { padding-left: 1.2rem; margin-bottom: .6rem; }
.set-description li { margin-bottom: .2rem; }
/* Admin > About popup (templates/admin/_about.html) */
.about-head { display: flex; align-items: center; gap: .75rem; }
.about-logo { width: 2.75rem; height: 2.75rem; border-radius: .6rem; display: flex; align-items: center; justify-content: center;
background: rgba(255, 193, 7, .15); color: var(--bs-warning); font-size: 1.5rem; }
.about-table th { font-weight: normal; color: var(--bs-secondary-color); width: 34%; }
.about-table td, .about-table th { padding: .3rem .5rem; }
.about-table .ver { font-variant-numeric: tabular-nums; }
.dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: .35rem; vertical-align: middle; }
.dot.ok { background: var(--bs-success); } .dot.warn { background: var(--bs-warning); } .dot.bad { background: var(--bs-danger); }
/* Sync jobs: the Schedule… pop-up (templates/admin/_job_schedule.html) */
.sched-days .btn { min-width: 3rem; }
.sched-summary { border-left: 3px solid var(--bs-info); padding: .4rem .7rem; background: rgba(13, 202, 240, .07); }
/* Set page: the main picture box and Brickset's additional pictures under it (static/app.js) */
.gallery-strip { display: grid; grid-template-columns: repeat(10, 1fr); gap: .2rem; margin-top: .4rem; }
.gallery-strip button { border: 1px solid transparent; border-radius: .25rem; padding: 0; background: #fff; aspect-ratio: 4 / 3;
overflow: hidden; display: flex; align-items: center; justify-content: center; }
.gallery-strip button img { width: 100%; height: 100%; object-fit: contain; }
.gallery-strip button:hover { border-color: var(--bs-info); }
.gallery-strip.collapsed button.extra { display: none; }
.gallery-pop { position: fixed; z-index: 1080; display: none; pointer-events: none; padding: .4rem; border-radius: .5rem;
background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .5); }
.gallery-pop.show { display: block; }
.gallery-pop img { display: block; width: 240px; height: 180px; object-fit: contain; background: #fff; border-radius: .3rem; }
.gallery-pop.natural img { width: auto; height: auto; max-width: 240px; max-height: 240px; } /* parts: 192 px */
.gallery-pop.large img { width: 320px; height: 320px; max-width: none; max-height: none; object-fit: contain; }
.gallery-pop.large div { max-width: 320px; }
.gallery-pop div { font-size: .75rem; color: var(--bs-secondary-color); margin-top: .25rem; max-width: 240px; }
@media (hover: none) { .gallery-pop { display: none !important; } }
/* Set page: the BrickLink export pop-up's XML preview */
.bl-xml { background: var(--bs-tertiary-bg); border-radius: .375rem; padding: .6rem .8rem; font-size: .75rem;
white-space: pre; overflow-x: auto; max-height: 14rem; }
/* ---- User settings (the name in the navbar; templates/settings/) ---- */
.user-btn { border: 0; background: none; color: var(--bs-body-color); display: inline-flex; align-items: center; gap: .35rem; padding: 0; }
.user-btn:hover { color: var(--bs-primary); }
/* avatars: a circle with a picture, or initials on a color */
.av { width: 2.6rem; height: 2.6rem; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center;
justify-content: center; background: #fff; flex-shrink: 0; font-weight: 600; color: #fff; }
.av img { width: 100%; height: 100%; object-fit: cover; }
.av-sm { width: 1.6rem; height: 1.6rem; font-size: .65rem; }
.av-lg { width: 4.5rem; height: 4.5rem; font-size: 1.4rem; border: 2px solid var(--bs-border-color); }
/* the sample minifigures: head and shoulders (the picture zoomed at the top); its white background takes the circle's color */
.av-sample img { object-fit: contain; mix-blend-mode: multiply; transform: scale(2.3); transform-origin: 50% 12%; }
.av-grid { display: flex; flex-wrap: wrap; gap: .4rem; }
.av-tile { display: inline-flex; align-items: center; justify-content: center; line-height: 0; /* sized to the circle */
border: 3px solid transparent; border-radius: 50%; padding: 2px; cursor: pointer; margin: 0; }
.av-tile:has(input:checked) { border-color: var(--bs-primary); }
.av-tile:hover { border-color: var(--bs-border-color); }
.av-tile:has(input:checked):hover { border-color: var(--bs-primary); }
.av-upload { width: calc(2.6rem + 10px); height: calc(2.6rem + 10px); display: inline-flex; align-items: center; justify-content: center;
border: 1px dashed var(--bs-border-color); color: var(--bs-secondary-color); }
.settings-body { min-height: 26rem; }
.settings-nav .nav-link { color: var(--bs-body-color); border-radius: .375rem; text-align: left; }
.settings-nav .nav-link.active { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); font-weight: 600; }
.settings-nav .nav-link i { width: 1.4rem; display: inline-block; }
.theme-card { border: 2px solid var(--bs-border-color); border-radius: .6rem; padding: .6rem; cursor: pointer; width: 15rem;
display: flex; flex-direction: column; gap: .5rem; margin: 0; }
.theme-card:has(input:checked) { border-color: var(--bs-primary); }
.theme-desc { color: var(--bs-secondary-color); font-size: .78rem; line-height: 1.3; }
/* the miniature page in each choice: drawn in that theme's own colors */
.mini { border-radius: .4rem; overflow: hidden; height: 7.5rem; border: 1px solid; font-size: 0; }
.mini.dark { background: #212529; border-color: #495057; --line: #adb5bd; --faint: #495057; --bar: #2b3035; --card: #2b3035; }
.mini.light { background: #ffffff; border-color: #dee2e6; --line: #212529; --faint: #ced4da; --bar: #f8f9fa; --card: #f8f9fa; }
.mini-nav { height: 1.1rem; background: var(--bar); display: flex; align-items: center; gap: .3rem; padding: 0 .4rem;
border-bottom: 1px solid var(--faint); }
.mini-logo { width: 1.4rem; height: .3rem; border-radius: .15rem; background: var(--line); }
.mini-link { width: .9rem; height: .22rem; border-radius: .1rem; background: var(--faint); }
.mini-body { padding: .4rem; }
.mini-card { display: flex; gap: .4rem; background: var(--card); border: 1px solid var(--faint); border-radius: .25rem; padding: .3rem; }
.mini-pic { width: 3.2rem; height: 2.4rem; background: #fff; border-radius: .2rem; display: flex; align-items: center;
justify-content: center; overflow: hidden; }
.mini-pic img { max-width: 100%; max-height: 100%; }
.mini-text { flex: 1; display: flex; flex-direction: column; gap: .25rem; padding-top: .1rem; }
.mini-line { height: .25rem; border-radius: .1rem; background: var(--line); }
.mini-line.faint { background: var(--faint); margin-top: .25rem; }
.mini-btn { width: 1.8rem; height: .45rem; border-radius: .15rem; background: #0d6efd; margin-top: auto; }
.mini-split { display: flex; border-radius: .4rem; overflow: hidden; }
.mini-split .mini { border-radius: 0; width: 50%; }
.mini-split .mini .mini-pic { width: 2rem; }
.plan-card { border: 1px solid var(--bs-border-color); border-radius: .6rem; padding: 1rem; }
.plan-card.current { border-color: var(--bs-primary); }
.plan-card .progress { height: .45rem; }
/* ---- Admin > Rebrickable -> BrickLink IDs (templates/admin/bricklink_ids.html) ---- */
.bl-table td { vertical-align: middle; }
.bl-table th { white-space: nowrap; }
.bl-table tr:has(.fix-edit.is-done) > td { background: rgba(var(--bs-success-rgb), .08); }
.bl-thumb { width: 4rem; height: 4rem; background: #fff; border-radius: .25rem; display: flex; align-items: center;
justify-content: center; overflow: hidden; flex-shrink: 0; }
.bl-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.bl-thumb.sm { width: 3.2rem; height: 3.2rem; }
.bl-thumb.none { background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); font-size: .6rem; text-align: center;
line-height: 1.1; border: 1px dashed var(--bs-border-color); }
.bl-swatch { width: 2.4rem; height: 1.6rem; border-radius: .25rem; border: 1px solid var(--bs-border-color); display: inline-block; }
.bl-swatch.trans { background-image: linear-gradient(45deg, rgba(255,255,255,.35) 25%, transparent 25%, transparent 75%,
rgba(255,255,255,.35) 75%); background-size: 8px 8px; }
.bl-find { font-size: .75rem; color: var(--bs-secondary-color); margin-top: .2rem; }
.bl-find a, .bl-find span { white-space: nowrap; }
.bl-examples { display: flex; gap: .6rem; flex-wrap: wrap; }
.bl-example { width: 5.6rem; }
.bl-example-num { font-size: .75rem; font-weight: 600; margin-top: .15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fix-input { width: 9rem; }
.bl-stat { border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: .4rem .8rem; min-width: 10rem; }
.bl-stat .big { font-size: 1.25rem; font-weight: 600; }
.bl-sets { cursor: default; border-bottom: 1px dotted var(--bs-secondary-color); }
.bl-sets:hover, .bl-sets:focus { color: var(--bs-primary); outline: none; }
.bl-sets-pop { position: fixed; z-index: 1080; display: none; max-width: 26rem; max-height: 60vh; overflow: auto;
padding: .6rem .75rem; border-radius: .5rem; font-size: .8rem; text-align: left; white-space: normal;
background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .5); }
.bl-sets-pop.show { display: block; }
.bl-sets-pop li { padding: .1rem 0; }
/* ---- News (templates/news/index.html) and Admin > Newsfeeds (templates/admin/news.html) ---- */
.news-card { display: flex; gap: .9rem; padding: .8rem 0; border-bottom: 1px solid var(--bs-border-color); }
.news-card:last-child { border-bottom: 0; }
.news-pic { width: 9rem; height: 6rem; flex-shrink: 0; background: #fff; border-radius: .4rem; overflow: hidden;
display: flex; align-items: center; justify-content: center; text-decoration: none; }
.news-pic img, .video-pic img, .news-adm-pic img { width: 100%; height: 100%; object-fit: cover; }
.news-title { font-weight: 600; font-size: 1.02rem; line-height: 1.3; }
.news-title a { color: var(--bs-body-color); text-decoration: none; }
.news-title a:hover { color: var(--bs-primary); text-decoration: underline; }
.news-meta { font-size: .8rem; color: var(--bs-secondary-color); margin: .15rem 0 .3rem; }
.news-text { font-size: .88rem; color: var(--bs-secondary-color); display: -webkit-box; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; overflow: hidden; }
.news-visited { font-size: .75rem; color: var(--bs-success-text-emphasis); white-space: nowrap; }
.is-visited .news-title a, .is-visited .video-title { color: var(--bs-secondary-color); font-weight: 500; }
.news-new { font-size: .65rem; vertical-align: .15em; }
.unread-only .is-visited { display: none; }
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 1rem; }
.video-pic { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; border-radius: .5rem;
overflow: hidden; background: #000; cursor: pointer; }
.video-pic .play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
font-size: 2.6rem; color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, .7); }
.video-pic:not(:has(img)) .play { display: none; }
.video-pic .len { position: absolute; right: .35rem; bottom: .35rem; background: rgba(0, 0, 0, .8); color: #fff;
font-size: .72rem; padding: 0 .3rem; border-radius: .2rem; }
.video:hover .video-title { color: var(--bs-primary); }
.video-title { font-weight: 600; font-size: .9rem; margin-top: .4rem; line-height: 1.3; }
/* our own generic pictures: a story or video without one, or whose picture stopped loading (app.js removes it) */
.news-ph { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: .2rem; color: var(--bs-secondary-color); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
font-size: .7rem; background: linear-gradient(135deg, var(--bs-tertiary-bg), var(--bs-secondary-bg));
border: 1px solid var(--bs-border-color); border-radius: inherit; }
.news-ph i { font-size: 2rem; line-height: 1; color: var(--bs-primary); opacity: .75; }
.video-pic .news-ph { font-size: .8rem; } .video-pic .news-ph i { font-size: 2.8rem; }
.news-pic img ~ .news-ph, .video-pic img ~ .news-ph, .news-adm-pic img ~ .news-ph { display: none; }
.news-adm-pic { width: 6rem; height: 3.6rem; background: #fff; border-radius: .3rem; overflow: hidden; display: block; }
.news-adm-pic .news-ph { font-size: .55rem; } .news-adm-pic .news-ph i { font-size: 1.2rem; }
.news-adm td { vertical-align: middle; }
.news-adm tr:has(.news-done) > td { background: rgba(var(--bs-success-rgb), .07); }
.min-w-0 { min-width: 0; }
.video-refused > div { background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); border-radius: .4rem; }
/* ---- Catalog: Released year / Retirement year pickers (templates/catalog/index.html) ---- */
.year-btn { width: 100%; display: flex; justify-content: space-between; align-items: center; text-align: left; }
.year-btn.picked { border-color: var(--bs-primary); }
.year-menu { width: 16rem; padding: 0; }
.year-menu .years { max-height: 17rem; overflow-y: auto; padding: .25rem 0; }
.year-menu label { display: flex; align-items: center; gap: .5rem; padding: .2rem .75rem; margin: 0; cursor: pointer; }
.year-menu label:hover { background: var(--bs-tertiary-bg); }
.year-menu .count { margin-left: auto; color: var(--bs-secondary-color); font-size: .8rem; }
.year-menu .future .count::after { content: " expected"; color: var(--bs-warning-text-emphasis); }
.year-menu .head { display: flex; justify-content: space-between; align-items: center; padding: .4rem .75rem;
border-bottom: 1px solid var(--bs-border-color); font-size: .8rem; color: var(--bs-secondary-color); }
/* ---------------------------------------------------------------- Admin > Users, Visitors */
.adm-stat { border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: .4rem .8rem; min-width: 7.5rem; }
.adm-stat b { display: block; font-size: 1.15rem; }
.adm-users tbody tr { cursor: pointer; }
.plan-opt { border: 2px solid var(--bs-border-color); border-radius: .5rem; padding: .6rem .8rem; cursor: pointer; flex: 1; }
.btn-check:checked + .plan-opt { border-color: var(--bs-primary); background: var(--bs-primary-bg-subtle); }
.email-preview { border: 1px solid var(--bs-border-color); border-radius: .5rem; background: #fff; color: #212529;
padding: 1rem 1.25rem; }
.email-preview-head { color: #6c757d; font-size: .8rem; margin-bottom: .75rem; font-family: Arial, sans-serif; }
.ip-link { color: inherit; text-decoration: underline dotted; }
.ip-link:hover { color: var(--bs-link-hover-color); }
.adm-panel { border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: .75rem 1rem; height: 100%; }
.bar-row { display: grid; grid-template-columns: minmax(8rem, 13rem) 1fr 4.5rem; align-items: center; gap: .5rem;
padding: .15rem .25rem; border-radius: .25rem; color: inherit; text-decoration: none; }
.bar-row .bar { height: .55rem; border-radius: .3rem; background: var(--bs-primary); min-width: 2px; }
.bar-row.sub { padding-left: 1.25rem; color: var(--bs-secondary-color); }
.bar-row.sub .bar { background: var(--bs-info); }
a.bar-row:hover { background: var(--bs-tertiary-bg); color: inherit; }
.day-chart { display: flex; align-items: flex-end; gap: 2px; height: 8rem; border-bottom: 1px solid var(--bs-border-color); }
.day-chart .day { flex: 1; height: 100%; display: flex; flex-direction: column-reverse; min-width: 1px; }
.day-chart .g { background: var(--bs-info); }
.day-chart .u { background: var(--bs-primary); }
.legend-box { display: inline-block; width: .7rem; height: .7rem; border-radius: .15rem; vertical-align: -1px; }
#world-map { height: 24rem; }
.map-scale .grad { display: inline-block; width: 8rem; height: .5rem; border-radius: .25rem; vertical-align: middle;
background: linear-gradient(90deg, #cfe2ff, #0a3d91); }
.bot-ips > td { background: var(--bs-tertiary-bg) !important; }
.jvm-tooltip { font-size: .8rem; padding: .3rem .5rem; }
/* Store and marketplace logos (templates/_brand_logos.html) */
.brand-logo { vertical-align: -.2em; margin-right: .15rem; }
[data-bs-theme="dark"] .walmart-logo .wm-word { fill: #4d9fff; } /* Walmart blue, lighter on dark; the spark stays yellow */
/* Set page: store prices */
.store-row { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .75rem; align-items: start; padding: .5rem 0;
border-top: 1px solid var(--bs-border-color-translucent); }
.store-row:first-child { border-top: 0; padding-top: 0; }
.store-price { font-size: 1.15rem; font-weight: 600; }
.store-spark { display: flex; align-items: flex-end; gap: 1px; height: 1.6rem; }
.store-spark div { width: 3px; background: var(--bs-primary); border-radius: 1px; min-height: 2px; }
.store-spark div.out { background: var(--bs-danger); opacity: .35; height: 100% !important; }
.store-spark div.none { background: transparent; }
@media (max-width: 575.98px) { .store-row { grid-template-columns: 1fr; gap: .25rem; } }
/* Admin > Retail prices > Amazon matches: waiting for review (readable in dark mode) */
.review-row > td { background: var(--bs-warning-bg-subtle); color: var(--bs-body-color); }
.review-row > td:first-child { box-shadow: inset 3px 0 0 var(--bs-warning); }
/* Set page: a faint line above the price sections (Store prices, Current market value) */
.price-sep { border-top: 1px solid var(--bs-border-color-translucent); padding-top: .6rem; margin-top: .35rem; }
@media (max-width: 575.98px) { dd.price-sep { border-top: 0; padding-top: 0; margin-top: 0; } }
/* ---- The Community (templates/community/, static/community.js) ---- */
.av-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
.odot { position: absolute; right: -1px; bottom: -1px; width: .7rem; height: .7rem; border-radius: 50%;
border: 2px solid var(--bs-body-bg); background: #20c997; }
.av-sm + .odot { width: .55rem; height: .55rem; }
.odot-inline { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: #20c997; }
/* online status (app/services/online_status.py): Online green, Away yellow, Offline red (only you see it), Custom blue */
.odot.s-away, .sdot.s-away { background: #ffc107; }
.odot.s-custom, .sdot.s-custom { background: #0d6efd; }
.odot.s-offline, .sdot.s-offline { background: #dc3545; }
.sdot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: #20c997; flex: none; }
.status-online { color: var(--bs-success-text-emphasis); } .status-away { color: var(--bs-warning-text-emphasis); }
.status-custom { color: var(--bs-primary-text-emphasis); }
.cat-icon { width: 2.4rem; height: 2.4rem; border-radius: .6rem; display: inline-flex; align-items: center; justify-content: center;
font-size: 1.15rem; color: #fff; flex-shrink: 0; }
.cat-icon-sm { width: 2rem; height: 2rem; font-size: 1rem; }
.cat-name { font-size: 1.1rem; font-weight: 600; line-height: 1.3; }
.topic-row:hover > td { background: var(--bs-tertiary-bg); }
.unread-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--bs-primary); display: inline-block; flex-shrink: 0; }
.set-chip { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--bs-border-color); border-radius: .4rem;
padding: .05rem .45rem; text-decoration: none; background: var(--bs-tertiary-bg); vertical-align: middle; }
.set-chip img { width: 2.2rem; height: 1.6rem; object-fit: contain; background: #fff; border-radius: .2rem; }
.post-body p { margin-bottom: .5rem; } .post-body p:last-child { margin-bottom: 0; }
.post-body ul, .post-body ol { margin-bottom: .5rem; padding-left: 1.4rem; }
blockquote.q { border-left: 3px solid var(--bs-border-color); padding-left: .75rem; color: var(--bs-secondary-color); margin: .5rem 0; }
.spoiler { background: var(--bs-secondary-color); color: transparent; border-radius: .2rem; cursor: pointer; padding: 0 .2rem; }
.spoiler.shown { background: var(--bs-tertiary-bg); color: inherit; cursor: auto; }
.spoiler a, .spoiler img { visibility: hidden; } .spoiler.shown a, .spoiler.shown img { visibility: visible; }
a.mention { font-weight: 600; text-decoration: none; }
.mod-bar { background: var(--bs-warning-bg-subtle); border-radius: .4rem; }
.reactions { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin-top: .3rem; }
.rchip { border: 1px solid var(--bs-border-color); border-radius: 1rem; padding: 0 .45rem; font-size: .8rem;
background: var(--bs-tertiary-bg); line-height: 1.5; color: var(--bs-body-color); }
button.rchip:hover { border-color: var(--bs-secondary-color); }
.rchip.mine { border-color: var(--bs-primary); background: var(--bs-primary-bg-subtle); }
.radd { border: 1px dashed var(--bs-border-color); border-radius: 1rem; padding: 0 .45rem; font-size: .8rem; background: none;
color: var(--bs-secondary-color); line-height: 1.5; }
.picker { display: inline-flex; gap: .15rem; padding: .25rem .35rem; border: 1px solid var(--bs-border-color); border-radius: 1.2rem;
background: var(--bs-body-bg); box-shadow: 0 .4rem 1rem rgba(0,0,0,.35); position: absolute; left: 0; bottom: 120%; z-index: 20; }
.picker button { border: 0; background: none; font-size: 1.15rem; line-height: 1; padding: .1rem .15rem; border-radius: .4rem; }
.picker button:hover { background: var(--bs-tertiary-bg); transform: scale(1.2); }
/* 16 reactions: two rows of 8; the composer's 40: a grid of 10 */
.picker { flex-wrap: wrap; width: max-content; max-width: min(17rem, 90vw); border-radius: .8rem; }
.picker-grid { display: grid; grid-template-columns: repeat(10, 1.9rem); max-width: none; }
.picker-grid.d-none { display: none; }
.pimgs { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.pimgs img { height: 7rem; max-width: 12rem; object-fit: cover; border-radius: .4rem; cursor: zoom-in;
border: 1px solid var(--bs-border-color); background: #fff; }
.pimgs .pimg-hidden img { opacity: .4; }
.upload-prev { position: relative; }
.upload-prev img { height: 4.5rem; width: 4.5rem; object-fit: cover; border-radius: .4rem; border: 1px solid var(--bs-border-color); background: #fff; }
.upload-prev .btn-close { position: absolute; top: .15rem; right: .15rem; background-color: rgba(255,255,255,.85); padding: .25rem; font-size: .5rem; }
.tnode { position: relative; }
.tpost { display: flex; gap: .6rem; padding: .5rem .25rem .25rem; border-radius: .5rem; }
.tpost:hover { background: var(--bs-tertiary-bg); }
.tpost.parent-hl, .tpost:target { background: var(--bs-primary-bg-subtle); }
.tpost.hidden-post { border: 1px dashed var(--bs-warning-border-subtle); }
.tbody { flex: 1; min-width: 0; }
.tmeta { font-size: .8rem; color: var(--bs-secondary-color); display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.tmeta b, .tmeta b a { color: var(--bs-body-color); text-decoration: none; }
.tchildren { margin-left: 1.05rem; padding-left: 1rem; position: relative; }
.tline { position: absolute; left: 0; top: 0; bottom: .5rem; width: 1rem; cursor: pointer; }
.tline::before { content: ""; position: absolute; left: .45rem; top: 0; bottom: 0; width: 2px; border-radius: 1px; background: var(--bs-border-color); }
.tline:hover::before { background: var(--bs-primary); }
.tnode.collapsed > .tchildren { display: none; }
.tnode:not(.collapsed) > .tpost .tmore { display: none; }
.tnode.collapsed > .tpost .ttoggle i::before { content: "\F4FE"; } /* bi-plus-square */
.ttoggle { border: 0; background: none; padding: 0; color: var(--bs-secondary-color); line-height: 1; }
.ttoggle:hover { color: var(--bs-primary); }
.tactions { display: flex; flex-wrap: wrap; gap: .9rem; font-size: .8rem; margin-top: .15rem; align-items: center; }
.tactions a, .tactions button.linkish { text-decoration: none; color: var(--bs-secondary-color); border: 0; background: none; padding: 0; }
.tactions a:hover, .tactions button.linkish:hover { color: var(--bs-primary); }
.reply-to { font-size: .75rem; }
.fpost { border: 1px solid var(--bs-border-color); border-radius: .6rem; }
.fpost .author { width: 11rem; flex-shrink: 0; border-right: 1px solid var(--bs-border-color); }
mark { background: rgba(255, 193, 7, .35); color: inherit; padding: 0 .1rem; border-radius: .15rem; }
.result { padding: .7rem .25rem; border-bottom: 1px solid var(--bs-border-color-translucent); }
.result:hover { background: var(--bs-tertiary-bg); }
.cm-set-card { display: flex; gap: .6rem; align-items: center; border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: .5rem; }
.cm-set-card img { width: 4.5rem; height: 3.4rem; object-fit: contain; background: #fff; border-radius: .3rem; }
.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, 2.6rem); gap: .35rem; }
.icon-opt { width: 2.6rem; height: 2.6rem; border: 2px solid var(--bs-border-color); border-radius: .5rem; background: none;
display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: var(--bs-body-color); cursor: pointer; }
.icon-opt:hover { border-color: var(--bs-secondary-color); }
.icon-opt:has(input:checked) { border-color: var(--bs-primary); background: var(--bs-primary-bg-subtle); }
.color-opt { width: 1.8rem; height: 1.8rem; border-radius: 50%; border: 3px solid transparent; outline: 1px solid var(--bs-border-color); cursor: pointer; }
.color-opt:has(input:checked) { border-color: var(--bs-body-bg); outline: 2px solid var(--bs-primary); }
.icon-opt input, .color-opt input { position: absolute; opacity: 0; pointer-events: none; }
.notif.unseen { background: var(--bs-primary-bg-subtle); }
/* ---- My Wish List (templates/wish_list/, static/wish_list.js) ---- */
.wl-heart-red { color: #ff4d6d; }
.wl-thumb { width: 4rem; height: 3rem; background: #fff; border-radius: .3rem; display: flex; align-items: center; justify-content: center; }
.wl-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.wl-thumb-sm { width: 3rem; height: 2.2rem; flex-shrink: 0; }
.wl-table { font-size: .9rem; }
.wl-table > :not(caption) > * > * { padding-left: .4rem; padding-right: .4rem; } /* the whole row fits: ✕ included */
.wl-table .wl-set { min-width: 12rem; }
.wl-num { width: 3.6rem; margin: 0 auto; text-align: center; }
.wl-owned-cell { position: relative; white-space: nowrap; padding-right: 1.5rem !important; }
.wl-owned-cell .wl-num { display: inline-block; vertical-align: middle; }
.wl-goal { position: absolute; margin-left: .2rem; top: 50%; transform: translateY(-50%); color: var(--bs-success); }
.wl-table tr.goal-done > td:not(:last-child):not(.wl-owned-cell) { opacity: .55; }
.wl-table .dropdown-menu { white-space: normal; text-align: left; }
.wl-sort { color: inherit; text-decoration: none; }
.wl-sort.active { color: var(--bs-primary); }
.wl-buy { background: #fff; border: 1px solid #fff; color: #111; display: inline-flex; align-items: center; gap: .3rem;
min-width: 5.9rem; justify-content: center; }
.wl-buy:hover { background: #f1f3f5; border-color: var(--bs-primary); }
.wl-buy .brand-logo { margin: 0; }
.wl-buy .walmart-logo .wm-word { fill: #0071DC !important; }
.wl-buy-word { font-size: .85rem; font-weight: 700; color: #111; }
.wl-total { border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: .4rem .75rem; }
.wl-total-amount { font-size: 1.6rem; font-weight: 700; line-height: 1.2; }
.wl-suggest { position: absolute; left: 0; right: 0; top: 2.5rem; z-index: 30; }
.wl-scanner { position: relative; cursor: help; }
.wl-scanner-dot { position: absolute; top: .3rem; right: .3rem; width: .45rem; height: .45rem; border-radius: 50%;
background: var(--bs-success); animation: pulse 1.6s infinite; }
.wl-scanner.busy { background: var(--bs-success-bg-subtle); }
.wl-error { --bs-popover-max-width: 22rem; --bs-popover-border-color: var(--bs-danger); font-size: .8rem; }
.wl-error .popover-header { font-size: .85rem; }
.chip-toggle { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem; border: 1px solid var(--bs-border-color);
border-radius: 1rem; cursor: pointer; user-select: none; color: var(--bs-secondary-color); background: transparent; }
.chip-toggle:hover { border-color: var(--bs-secondary-color); color: var(--bs-body-color); }
.chip-toggle .n { font-size: .75rem; color: var(--bs-secondary-color); }
.chip-toggle .on { display: none; } .chip-toggle .off { display: inline; }
.btn-check:checked + .chip-toggle { color: var(--bs-body-color); background: var(--bs-tertiary-bg); border-color: var(--bs-secondary-color); }
.btn-check:checked + .chip-toggle .on { display: inline; } .btn-check:checked + .chip-toggle .off { display: none; }
.btn-check:focus-visible + .chip-toggle { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
/* the heart on catalog cards: top right, on hover (always on phones and once on the list) */
.card-heart { position: absolute; top: .4rem; right: .4rem; width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 0; z-index: 3;
background: rgba(255, 255, 255, .92); color: #495057; display: flex; align-items: center; justify-content: center;
font-size: 1.05rem; opacity: 0; transition: opacity .15s, transform .15s; box-shadow: 0 .1rem .4rem rgba(0,0,0,.25); }
.wish-wrap { position: relative; }
.wish-wrap .card-badges { right: 2.8rem; } /* room for the heart */
.wish-wrap .card-heart { right: calc(var(--bs-gutter-x) * .5 + .4rem); } /* inside the card, not the column gutter */
.wish-wrap:hover .card-heart, .card-heart.on, .card-heart:focus-visible { opacity: 1; }
.card-heart:hover { transform: scale(1.1); color: #e03150; }
.card-heart.on { color: #e03150; }
@media (hover: none) { .card-heart { opacity: 1; } }
.btn-wish.on { color: #fff; background: #e03150; border-color: #e03150; }
.wl-want-pop { position: absolute; width: 17rem; z-index: 1060; }
/* Select on catalog results: tick cards, then add them all (static/catalog.js) */
.sel-check { position: absolute; top: .55rem; right: calc(var(--bs-gutter-x) * .5 + .55rem); width: 1.4rem; height: 1.4rem;
margin: 0; display: none; pointer-events: none; z-index: 3; }
.selecting .sel-check { display: block; }
.sel-check:not(:checked) { background-color: #fff; border: 2px solid var(--bs-primary); }
.selecting .card-heart { display: none; }
.selecting .set-card.picked { outline: 2px solid var(--bs-primary); outline-offset: -1px; }
.sel-bar { position: sticky; bottom: 1rem; z-index: 5; margin-top: .75rem; display: flex; flex-wrap: wrap; gap: .75rem;
align-items: center; background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); border-radius: .6rem;
padding: .5rem .75rem; box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .35); }
/* Admin > Users > Roles: roles side by side */
.role-matrix .role-col { min-width: 9.5rem; text-align: center; }
.role-matrix td.c { text-align: center; }
.role-matrix tr.area td { background: var(--bs-tertiary-bg); font-weight: 600; }
/* Page not found (templates/errors/404.html): the searching builder, with question marks drifting above */
.nf-page { max-width: 34rem; margin: 2.5rem auto 3rem; text-align: center; }
.nf-page svg { width: 100%; max-width: 22rem; height: auto; }
.nf-page h1 { font-size: 1.6rem; margin-top: 1rem; }
.nf-lead { font-size: 1.02rem; color: var(--bs-secondary-color); }
.nf-float { animation: nf-float 3.2s ease-in-out infinite; }
.nf-q { font: 700 22px system-ui, sans-serif; fill: #adb5bd; opacity: 0; animation: nf-q 3s ease-in-out infinite; }
.nf-q2 { animation-delay: 1s; font-size: 28px; }
.nf-q3 { animation-delay: 2s; }
@keyframes nf-float { 50% { transform: translateY(-8px); } }
@keyframes nf-q { 0% { opacity: 0; transform: translateY(8px); } 25%, 60% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }
@media (prefers-reduced-motion: reduce) { .nf-float, .nf-q { animation: none; } .nf-q { opacity: 1; } }
/* Admin > Catalog edits > Import retirement dates */
.retire-step { padding: .25rem .75rem; border-radius: 1rem; border: 1px solid var(--bs-border-color); color: var(--bs-secondary-color); }
.retire-step.on { border-color: var(--bs-primary); color: var(--bs-body-color); background: rgba(var(--bs-primary-rgb), .15); }
.retire-step.done { color: var(--bs-success); border-color: var(--bs-success); }
.retire-preview th, .retire-preview td { white-space: nowrap; }
.retire-preview .col-set { background: rgba(var(--bs-info-rgb), .15); }
.retire-preview .col-date { background: rgba(var(--bs-warning-rgb), .15); }
.retire-preview tr.hdr td { color: var(--bs-secondary-color); text-decoration: line-through; }
/* the set page: the retirement date's history (a small timeline) */
.retire-hist { border-left: 2px solid var(--bs-border-color); margin: .5rem 0 .25rem .35rem; padding-left: .85rem; }
.retire-hist li { list-style: none; position: relative; margin-bottom: .35rem; }
.retire-hist li::before { content: ""; position: absolute; left: -1.21rem; top: .4rem; width: .6rem; height: .6rem; border-radius: 50%;
background: var(--bs-body-bg); border: 2px solid var(--bs-secondary-color); }
.retire-hist li.now::before { background: var(--bs-primary); border-color: var(--bs-primary); }
.retire-from { font-size: .75rem; }
/* a file drop box (Import retirement dates): drop a file on it or click to choose */
.file-drop { display: flex; align-items: center; gap: .9rem; padding: 1.4rem 1.2rem; margin: 0; cursor: pointer;
border: 2px dashed var(--bs-border-color); border-radius: .5rem; transition: border-color .15s, background .15s; }
.file-drop:hover, .file-drop.dragover { border-color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .06); }
.file-drop.chosen { border-style: solid; border-color: var(--bs-success); }
/* Admin menu: the second row, a group's pages (templates/admin/_nav.html) */
.admin-sub { border-bottom: 1px solid var(--bs-border-color); }
.admin-sub .nav-link { color: var(--bs-secondary-color); border-bottom: 2px solid transparent; border-radius: 0; padding: .4rem .75rem; }
.admin-sub .nav-link:hover { color: var(--bs-body-color); }
.admin-sub .nav-link.active { color: var(--bs-body-color); border-bottom-color: var(--bs-primary); }
/* API tokens: a token shown in full (templates/admin/_token_cell.html) */
.tok-full { font-size: .78rem; word-break: break-all; max-width: 26rem; margin: .15rem 0 .25rem; }
/* Navbar: My Data (templates/base.html) opens on hover with a mouse; click / tap / keyboard everywhere */
@media (min-width: 768px) and (hover: hover) {
.nav-hover:hover > .dropdown-menu, .nav-hover:focus-within > .dropdown-menu { display: block; }
.nav-hover > .dropdown-menu { margin-top: 0; }
}
.navbar .dropdown-item.active { background: var(--bs-secondary-bg); color: var(--bs-body-color); font-weight: 600; }
/* Admin > Catalog Data > Missing pictures (templates/admin/missing_pictures.html, _picture_modal.html) */
.mp-ph { width: 44px; height: 44px; border: 1px dashed var(--bs-border-color); border-radius: .375rem; display: flex;
align-items: center; justify-content: center; color: var(--bs-secondary-color); }
#pic-content .file-drop { flex-direction: column; gap: .25rem; text-align: center; padding: 1rem; }
.pic-preview { aspect-ratio: 1; overflow: hidden; }
.pic-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* My Saved Search > a search: column filters (templates/searches/_column_filters.html) */
.cf-funnel { border: 0; background: none; color: var(--bs-secondary-color); padding: 0 .15rem; font-size: .75rem; vertical-align: baseline; }
.cf-funnel:hover, .cf-funnel.on { color: var(--bs-info); }
.cf-menu { width: 16rem; font-size: .8rem; }
.cf-panel { width: min(34rem, 92vw); font-size: .8rem; }
.cf-themes { max-height: 14rem; overflow-y: auto; }
.chip-filter { border-color: var(--bs-info); background: rgba(var(--bs-info-rgb), .08); }
.chip-filter .btn-close { font-size: .5rem; margin-left: .2rem; }
/* Cards / List: the collapsible List's rows (My Saved Search, My Inventory): the name takes the room, the numbers
line up in fixed right-aligned columns */
.accordion-button .list-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.accordion-button .list-new { flex: 0 0 5.5rem; text-align: right; }
.accordion-button .list-count { flex: 0 0 9rem; text-align: right; margin-right: .75rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.accordion-button .list-value { flex: 0 0 11rem; text-align: right; margin-right: .75rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* phones: the name on its own line, the numbers under it (still in their columns, pushed right) */
@media (max-width: 575.98px) {
.accordion-button:has(.list-name) { flex-wrap: wrap; row-gap: .25rem; }
.accordion-button .list-name { flex-basis: calc(100% - 1.75rem); }
.accordion-button .list-new { flex: 0 0 auto; margin-left: auto; }
.accordion-button .list-new:empty + .list-count { margin-left: auto; }
.accordion-button .list-count { flex-basis: 6.5rem; }
.accordion-button .list-value { flex-basis: 8.5rem; }
#inventory-list .list-count { margin-left: auto; }
}
/* Sign up / Log in (templates/auth/_macros.html): Google's G, the new-password rules */
.google-g { width: 18px; height: 18px; flex: none; }
.pw-rules li { list-style: none; color: var(--bs-secondary-color); }
.pw-rules li.ok { color: var(--bs-success); }
/* Edit set info: picture drop zones (main picture block, minifigure cards; static/admin.js) */
[data-picture-dropzone] { border: 2px dashed transparent; border-radius: .5rem; transition: border-color .15s, background .15s; }
[data-picture-dropzone].dragover { border-color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .07); }
[data-picture-dropzone].uploading { opacity: .6; pointer-events: none; }
/* Community: the @ list while writing (static/community.js) */
.mention-menu { position: absolute; width: 16rem; max-height: 18rem; overflow-y: auto; z-index: 1060; }
.mention-menu .dropdown-item.active { background: var(--bs-secondary-bg); color: var(--bs-body-color); }
/* Community polls (templates/community/_poll.html) */
.poll { border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: .75rem .9rem; max-width: 34rem; }
.poll-bar { position: relative; border-radius: .375rem; background: var(--bs-secondary-bg); overflow: hidden; margin-bottom: .4rem; }
.poll-bar .fill { position: absolute; inset: 0 auto 0 0; background: rgba(var(--bs-primary-rgb), .3); }
.poll-bar.mine .fill { background: rgba(var(--bs-primary-rgb), .55); }
.poll-bar .row-text { position: relative; display: flex; justify-content: space-between; gap: .5rem; padding: .35rem .6rem; }
/* My Inventory: All inventories row (list view), the Location column, import results */
#inventory-list .list-all::after { transform: rotate(-90deg); }
#inventory-list .list-all { color: inherit; }
.inv-table .inv-loc { min-width: 8.5rem; }
.inv-table .qty { min-width: 4.5rem; }
.import-failed { max-height: 16rem; overflow-y: auto; }
#import-content .file-drop { padding: 1rem; }
/* Add to inventory (Browse Catalog cards, the set page; static/quick_add.js): under the wish-list heart */
.card-inv { position: absolute; top: 2.9rem; right: .4rem; width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 0; z-index: 3;
background: rgba(255, 255, 255, .92); color: #495057; display: flex; align-items: center; justify-content: center;
font-size: 1rem; opacity: 0; transition: opacity .15s, transform .15s; box-shadow: 0 .1rem .4rem rgba(0,0,0,.25); }
.wish-wrap .card-inv { right: calc(var(--bs-gutter-x) * .5 + .4rem); }
.wish-wrap:hover .card-inv, .card-inv.on, .card-inv:focus-visible { opacity: 1; }
.card-inv:hover { transform: scale(1.1); color: #198754; }
.card-inv.on { color: #198754; }
.card-inv .n { position: absolute; bottom: -.2rem; right: -.3rem; min-width: 1.05rem; font-size: .62rem; line-height: 1rem;
font-weight: 700; color: #fff; background: #198754; border-radius: 1rem; padding: 0 .25rem; }
@media (hover: none) { .card-inv { opacity: 1; } }
.selecting .card-inv { display: none; }
.inv-pick .list-group-item { cursor: pointer; }
.inv-pick .list-group-item.active { background: rgba(var(--bs-primary-rgb), .18); border-color: var(--bs-primary); color: inherit; z-index: 0; }
.qa-sets { max-height: 22rem; overflow-y: auto; }
.qa-thumb { width: 44px; height: 34px; flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden;
background: #fff; border-radius: .25rem; border: 1px solid var(--bs-border-color); }
.qa-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.qa-qty { width: 4.4rem; flex: none; }
.min-w-0 { min-width: 0; }
/* Scrollable pop-ups whose content is one