:root {
	--bfs-primary: #9966ff;
	--bfs-secondary: #ff9966;
	--bfs-primary-rgb: 153, 102, 255;
	--bs-body-bg: #121212;
	--bs-body-bg-rgb: 18, 18, 18;
	--bs-body-color: #e0e0e0;
	--bs-emphasis-color: #ffffff;
	--bs-border-color: rgba(255, 255, 255, 0.15);
	--bs-secondary-bg: #1e1e1e;
	--bs-tertiary-bg: #2a2a2a;
	--bfs-success: #48d18d;
	--bfs-success-rgb: 72, 209, 141;
	--bfs-warning: #f5b759;
	--bfs-warning-rgb: 245, 183, 89;
	--bfs-danger: #ff6b6b;
	--bfs-danger-rgb: 255, 107, 107;
	--bfs-info: #4cc9f0;
	--bfs-info-rgb: 76, 201, 240;
	--bfs-blue: #5e81f5;
	--bfs-blue-rgb: 94, 129, 245;
}
body { font-family: "Source Sans Pro", sans-serif; }
h1, h2, h5, h6, .h5 { font-weight: 700 !important; }
a { color: var(--bfs-primary); text-decoration: none; }
a:hover { color: white; text-decoration: underline; }
.btn { font-weight: 700; text-decoration: none !important; }
.bg-primary.btn:hover, .bg-success.btn:hover, .bg-warning.btn:hover, .bg-danger.btn:hover, .bg-info.btn:hover, .bg-blue.btn:hover { opacity: .75 }
.logo-text { background: linear-gradient(45deg, var(--bfs-primary), var(--bfs-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 900 !important; }
.logo-brand { font-size: 1.5rem; font-weight: 900; color: var(--bs-emphasis-color); }
.logo-brand .bi { color: var(--bfs-primary); font-size: 2rem; margin-right: 0.5rem; line-height: 1rem; }
.logo-brand svg { height: 32px; margin-right: 0.5rem; }
.site-header, .site-footer { background-color: var(--bs-secondary-bg); border-color: var(--bs-border-color) !important; }
.main-content-card { background-color: var(--bs-secondary-bg); border: 1px solid var(--bs-border-color); border-radius: 1rem; }
.dropdown-item { display: flex; align-items: center; }
.dropdown-item img, .dropdown-item .dropdown-img { height: 21px; width: 21px; margin-right: .5rem; }
.dropdown-item.active { background-color: rgba(var(--bfs-primary-rgb), 0.2); color: white !important; border-left: 4px solid var(--bfs-primary); font-weight: 700; }
.dropdown-item.active img, .dropdown-item.active .dropdown-img { margin-left: -4px; }
.dropdown-item:hover, .dropdown-item:focus, .dropdown-item:active { background-color: rgba(var(--bfs-primary-rgb), 0.1) !important; }
.table { --bs-table-bg: var(--bs-tertiary-bg); --bs-table-border-color: var(--bs-border-color); --bs-table-striped-bg: #2a2a2a; --bs-table-hover-bg: #343434; border-radius: 0.5rem; overflow: hidden; }
.table thead { font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; font-size: 0.9rem; }
.table tbody tr { transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; }
.table tbody tr:hover .site-name a { color: white; }
.table .rank-cell { font-size: 1.25rem; font-weight: 700; color: var(--bs-secondary-color); counter-increment: rowNumber; }
.table .rank-cell::before { content: counter(rowNumber); min-width: 1em; }
.table .site-name { font-weight: 700; font-size: 1.25rem; }
.table .site-name img { width: 24px; height: 24px; margin-right: 0.5rem; }
.table .icon { font-size: 1.75rem; }
table { counter-reset: rowNumber; }
tr.tr-border-2:last-child.show td, tr.tr-border-2:last-child.collapsing td { border-bottom-color: transparent !important; }
tr.tr-border:nth-last-child(2):has(+ tr.tr-border-2:not(.show):not(.collapsing)) td { border-bottom-color: transparent !important; }
.text-success { color: var(--bfs-success) !important; }
.text-warning { color: var(--bfs-warning) !important; }
.text-danger  { color: var(--bfs-danger) !important; }
.text-info    { color: var(--bfs-info) !important; }
.bg-primary { color: var(--bfs-primary) !important; background-color: rgba(var(--bfs-primary-rgb), 0.15) !important; }
.bg-success { color: var(--bfs-success) !important; background-color: rgba(var(--bfs-success-rgb), 0.15) !important; }
.bg-warning { color: var(--bfs-warning) !important; background-color: rgba(var(--bfs-warning-rgb), 0.15) !important; }
.bg-danger { color: var(--bfs-danger) !important; background-color: rgba(var(--bfs-danger-rgb), 0.15) !important; }
.bg-info { color: var(--bfs-info) !important; background-color: rgba(var(--bfs-info-rgb), 0.15) !important; }
.bg-blue { color: var(--bfs-blue) !important; background-color: rgba(var(--bfs-blue-rgb), 0.15) !important; }
.preview-toggle-cell { cursor: pointer; }
.screenshot-cell { padding: 0 !important; background-color: #000; }
.screenshot-wrapper { padding: 1rem; display: flex; justify-content: center; align-items: center; }
.screenshot-wrapper:hover img { opacity: 0.8; }
.screenshot-cell img, .screenshot-cell .screenshot-failed { max-width: 100%; border-radius: 0.25rem; transition: opacity 0.2s ease-in-out; }
.screenshot-cell .screenshot-failed { color: var(--bs-secondary-color); padding: 3rem 1rem; }
.preview-icon.spinner-border { width: 1.25rem; height: 1.25rem; vertical-align: middle; border-width: .2em; }
.page-sites-card:hover { background-color: rgba(var(--bs-body-bg-rgb), 0.25); }
.favicon-container { width: 24px; height: 24px; margin-right: 0.5rem; flex-shrink: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23444'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814z'/%3E%3C/svg%3E"); background-size: contain; background-position: center; background-repeat: no-repeat; }
.favicon-image { opacity: 0; transition: opacity 0.4s ease-in-out; flex-shrink: 0; }
.favicon-image.loaded { opacity: 1; background-color: var(--bs-tertiary-bg); }
footer .policy li:not(:last-of-type)::after { content: "|"; display: inline-block; opacity: 0.5; margin: 0 0.5rem; }
.card .favicon-image.loaded { opacity: 1; background-color: var(--bs-secondary-bg); }
.table tbody tr:hover .favicon-image.loaded { background-color: var(--bs-table-hover-bg); }
.site-card { position: relative; background-color: var(--bs-secondary-bg); border: 1px solid var(--bs-border-color); transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; }
.site-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); z-index: 10; }
.site-card .card-img-top { transition: transform 0.3s ease; }
.site-card:hover .card-img-top { transform: scale(1.05); }
.site-card .card-img-container { position: relative; overflow: hidden; border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0; }
.card-tools-badge { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 2; display: flex; align-items: center; gap: 0.25rem; background-color: rgba(0, 0, 0, 0.7); border-radius: 0.5rem; opacity: 0.85; transition: opacity 0.2s ease-in-out; }
.site-card:hover .card-tools-badge { opacity: 1; }
.sites-icon { height: 4rem; width: 4rem; object-fit: contain; }
.card-tools-badge .dropdown-toggle::after { display: none; }
.dropdown-item { text-decoration: none !important; }
.card-img-container { position: relative; height: 0; padding-bottom: 83.333%; background-color: var(--bs-secondary-bg); display: flex; align-items: center; justify-content: center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' fill='%23444' class='bi bi-image' viewBox='0 0 16 16'%3E%3Cpath d='M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z'/%3E%3Cpath d='M2.002 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2h-12zm12 1a1 1 0 0 1 1 1v6.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12V3a1 1 0 0 1 1-1h12z'/%3E%3C/svg%3E"); background-size: 4rem; background-position: center; background-repeat: no-repeat; }
.card-img-container.screenshot-failed { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 16 16'%3E%3Cg opacity='0.3'%3E%3Cpath fill='%23e0e0e0' d='M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z'/%3E%3Cpath fill='%23e0e0e0' d='M2.002 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2h-12zm12 1a1 1 0 0 1 1 1v6.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12V3a1 1 0 0 1 1-1h12z'/%3E%3C/g%3E%3Cpath stroke='%23ff6b6b' stroke-width='1.5' stroke-linecap='round' opacity='0.75' d='M3 3l10 10M13 3L3 13'/%3E%3C/svg%3E"); }
.card-img-container .card-img-top { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.card-img-top.lazy-load-image { opacity: 0; transition: opacity 0.5s ease-in-out; }
.card-img-top.lazy-load-image.loaded { opacity: 1; }
.header-menu-button { background-color: var(--bs-secondary-bg) !important; border-color: transparent; }
.header-menu-button .icon-close { display: none; }
.header-menu-button[aria-expanded="true"] .icon-menu { display: none; }
.header-menu-button[aria-expanded="true"] .icon-close { display: inline-block; }
@media (min-width: 768px) { .sites-icon { height: 6rem; width: 6rem; }