@import "4play.css";
/* LiterallyGoogle theme tokens */
@font-face {
    font-family: "Google Sans";
    src: url("/themes/sopat712-degoog-toolkit-literallygoogle-theme/fonts/google-sans/static/GoogleSans-Regular.woff2")
        format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Google Sans";
    src: url("/themes/sopat712-degoog-toolkit-literallygoogle-theme/fonts/google-sans/static/GoogleSans-Medium.woff2")
        format("woff2");
    font-weight: 500 700;
    font-style: normal;
    font-display: swap;
}

* {
    font-family: "Google Sans", sans-serif;
}

code,
pre,
kbd,
samp,
tt,
var {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace !important;
}

:root {
    /* Results layout tokens */
    --literallygoogle-results-logo-size: clamp(1.875rem, 1.625rem + 1.1vw, 2.5rem);
    --literallygoogle-results-content-inline-start: calc(
        1.25rem + 0.75rem + 1rem + 3.35 * var(--literallygoogle-results-logo-size)
    );
    --literallygoogle-results-content-inline-end: calc(
        1.25rem + var(--lg-scrollbar-gutter, 0.625rem)
    );
    /* Theme-neutral contract consumed by Store plugins. Keep the runtime rail
       alias on #results-page below so fluid column overrides remain live. */
    --degoog-results-content-inline-start: var(
        --literallygoogle-results-content-inline-start
    );
    --degoog-results-content-inline-end: var(
        --literallygoogle-results-content-inline-end
    );
    --degoog-results-layout-max: var(--literallygoogle-results-layout-max);
    --literallygoogle-results-layout-max: 76rem;
    --literallygoogle-results-main-col-max: 48rem;
    --literallygoogle-search-shell-height: 50px;
    --lg-chrome-surface: var(--bg-light);
    --lg-sidebar-row-surface: var(--bg-light);
    --literallygoogle-results-sidebar-min: calc(17rem + 5px);
    --literallygoogle-results-sidebar-max: calc(21rem + 5px);
    /* Sidebar scroll track sits outside panel width (see #sidebar-col.is-sticky). */
    --lg-sidebar-scrollbar-size: 0.75rem;
    --literallygoogle-results-sidebar-col: calc(
        var(--literallygoogle-results-sidebar-max) + var(--lg-sidebar-scrollbar-size)
    );
    --literallygoogle-results-column-gap: 2rem;
    --literallygoogle-media-filter-width: 15rem;
    --literallygoogle-media-row-gap: 0.5rem;
    --literallygoogle-row-padding: 14px;
    --literallygoogle-control-height: 2.5rem;
    --literallygoogle-mobile-drawer-width: min(22rem, calc(100vw - 2.75rem));
    --literallygoogle-image-organizers-order: 1;
    --literallygoogle-image-results-order: 2;
    --literallygoogle-image-preview-order: 3;
    --lg-image-selection-ring: 0.375rem;
    --lg-fab-size: 3.5rem;
    --lg-drawer-duration: 400ms;
    --lg-drawer-morph-duration: 320ms;
    --lg-drawer-ease-open: cubic-bezier(0.16, 1, 0.3, 1);
    --lg-drawer-ease-close: cubic-bezier(0.4, 0, 0.2, 1);
    --lg-drawer-width-mobile: min(23.5rem, calc(100vw - 1.5rem));
    --lg-drawer-width-desktop: min(23.5rem, calc(100vw - 2rem));
    --lg-drawer-handle-width: 2.25rem;
    --lg-drawer-handle-height: 0.25rem;
    --theme-radius-xs: 4px;
    --theme-radius-sm: 8px;
    --theme-radius-md: 12px;
    --theme-radius-lg: 16px;
    --theme-radius-xl: 20px;
    --theme-radius-search: 24px;
    --theme-radius-pill: 999px;
    --primary: #4285f4;
    --primary-hover: #5a95f5;
    --primary-rgb: 66, 133, 244;
    --danger: #ea4335;
    --warning: #fbbc05;
    --success: #34a853;
    --bg: #1f1f1f;
    --bg-light: #303134;
    --bg-hover: #3c4043;
    --border: #5f6368;
    --border-light: #444746;
    --text-primary: #e8eaed;
    --text-secondary: #80868b;
    --text-link: #99c3ff;
    --text-link-visited: #c58af9;
    --text-cite: #bdc1c6;
    --text-snippet: #bdc1c6;
    --search-bar-bg: #4d5156;
    --search-bar-bg-hover: #5f6368;
    --search-bar-focused: #303134;
    --search-bar-icon: #e8e8e8;
    --btn-bg: #303134;
    --btn-text: #e8eaed;
    --overlay-bg: rgba(0, 0, 0, 0.6);
    --white: #fff;
    --lg-search-shadow: 0 2px 8px 1px rgba(0, 0, 0, 0.24);
    /* Same color as --lg-search-shadow; negative spread trims upward blur at the bar seam. */
    --lg-search-shadow-dropdown:
        5px 6px 8px -4px rgba(0, 0, 0, 0.24),
        -5px 6px 8px -4px rgba(0, 0, 0, 0.24),
        0 8px 8px 1px rgba(0, 0, 0, 0.24);
    /* Settings / Store surfaces (see design.md) */
    --lg-settings-row-bg: var(--bg-light);
    --lg-settings-chip-btn-bg: #282a2c;
    --lg-settings-chip-btn-bg-light: #d5dff0;
    --lg-settings-select-light: #dde3ea;
    --lg-settings-select-light-hover: #ced3da;
    --lg-settings-page-bg-light: #f0f4f9;
    --lg-settings-apps-pocket-bg: #e9eef6;
}

html[data-image-mode-desktop-layout="preview-left"],
html[data-image-mode-desktop-layout="fab-right"] {
    --literallygoogle-image-organizers-order: 3;
    --literallygoogle-image-results-order: 2;
    --literallygoogle-image-preview-order: 1;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme=dark]) {
        --primary: #4285f4;
        --primary-hover: #5a95f5;
        --primary-rgb: 66, 133, 244;
        --danger: #ea4335;
        --warning: #fbbc05;
        --success: #34a853;
        --bg: #fff;
        --bg-light: #f7f8fa;
        --bg-hover: #e8eaed;
        --border: #dadce0;
        --border-light: #d2d2d2;
        --text-primary: #202124;
        --text-secondary: #70757a;
        --text-link: #1a0dab;
        --text-link-visited: #681da8;
        --text-cite: #202124;
        --text-snippet: #4d5156;
        --search-bar-bg: #ebebeb;
        --search-bar-bg-hover: #ebebeb;
        --search-bar-focused: white;
        --search-bar-icon: #1f1f1f;
        --btn-bg: #f8f9fa;
        --btn-text: #3c4043;
        --overlay-bg: rgba(0, 0, 0, 0.4);
        --white: #fff;
        --lg-search-shadow: 0px 3px 10px 0px rgba(31, 31, 31, 0.08);
        --lg-search-shadow-hover: 0 2px 8px 1px rgba(64, 60, 67, 0.24);
        --lg-search-shadow-dropdown:
            4px 6px 10px -5px rgba(31, 31, 31, 0.08),
            -4px 6px 10px -5px rgba(31, 31, 31, 0.08),
            0 8px 10px 0px rgba(31, 31, 31, 0.08);
    }
}

[data-theme="light"] {
    --primary: #4285f4;
    --primary-hover: #5a95f5;
    --primary-rgb: 66, 133, 244;
    --danger: #ea4335;
    --warning: #fbbc05;
    --success: #34a853;
    --bg: #fff;
    --bg-light: #f7f8fa;
    --bg-hover: #e8eaed;
    --border: #dadce0;
    --border-light: #d2d2d2;
    --text-primary: #202124;
    --text-secondary: #70757a;
    --text-link: #1a0dab;
    --text-link-visited: #681da8;
    --text-cite: #202124;
    --text-snippet: #4d5156;
    --search-bar-bg: #ebebeb;
    --search-bar-bg-hover: #ebebeb;
    --search-bar-focused: white;
    --search-bar-icon: #1f1f1f;
    --btn-bg: #f8f9fa;
    --btn-text: #3c4043;
    --overlay-bg: rgba(0, 0, 0, 0.4);
    --white: #fff;
    --lg-search-shadow: 0px 3px 10px 0px rgba(31, 31, 31, 0.08);
    --lg-search-shadow-hover: 0 2px 8px 1px rgba(64, 60, 67, 0.24);
    --lg-search-shadow-dropdown:
        4px 6px 10px -5px rgba(31, 31, 31, 0.08),
        -4px 6px 10px -5px rgba(31, 31, 31, 0.08),
        0 8px 10px 0px rgba(31, 31, 31, 0.08);
}

[data-theme="dark"] {
    --primary: #4285f4;
    --primary-hover: #5a95f5;
    --primary-rgb: 66, 133, 244;
    --danger: #ea4335;
    --warning: #fbbc05;
    --success: #34a853;
    --bg: #1f1f1f;
    --bg-light: #303134;
    --bg-hover: #3c4043;
    --border: #5f6368;
    --border-light: #444746;
    --text-primary: #e8eaed;
    --text-secondary: #80868b;
    --text-link: #99c3ff;
    --text-link-visited: #c58af9;
    --text-cite: #bdc1c6;
    --text-snippet: #bdc1c6;
    --search-bar-bg: #4d5156;
    --search-bar-bg-hover: #5f6368;
    --search-bar-focused: #303134;
    --search-bar-icon: #e8e8e8;
    --btn-bg: #303134;
    --btn-text: #e8eaed;
    --overlay-bg: rgba(0, 0, 0, 0.6);
    --white: #fff;
}

/* Home multicolor wordmark: only force plain white in dark UI (matches dark home). */
[data-theme="dark"] .logo-d,
[data-theme="dark"] .logo-e,
[data-theme="dark"] .logo-g1,
[data-theme="dark"] .logo-o1,
[data-theme="dark"] .logo-o2,
[data-theme="dark"] .logo-g2 {
    color: #fff !important;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .logo-d,
    :root:not([data-theme="light"]) .logo-e,
    :root:not([data-theme="light"]) .logo-g1,
    :root:not([data-theme="light"]) .logo-o1,
    :root:not([data-theme="light"]) .logo-o2,
    :root:not([data-theme="light"]) .logo-g2 {
        color: #fff !important;
    }
}

.logo {
    letter-spacing: -4px;
    font-size: 92px;
}

.results-search-bar,
.search-bar {
    display: flex;
    align-items: center;
    font-family: "Google Sans" !important;
    font-weight: 100;
    height: var(--literallygoogle-search-shell-height);
}

/* Core's backwards-compatibility selector has higher specificity than the
   theme's shared class rule. Keep the intended Google-sized shell on both
   search surfaces instead of falling back to the 44px core default. */
#home-search .search-bar,
#results-page .results-search-bar {
    height: var(--literallygoogle-search-shell-height);
    min-height: var(--literallygoogle-search-shell-height);
}

.results-search-bar {
    position: relative;
    box-sizing: border-box;
}

.results-search-bar .search-bar-actions {
    flex-shrink: 0;
}

.results-search-bar .search-submit-btn {
    flex-shrink: 0;
}

.search-input {
    flex: 1;
    width: 100%;
    font-family: "Google Sans" !important;
    font-weight: 100;
    height: var(--literallygoogle-search-shell-height);
    background: transparent;
    border: none;
    outline: none;
}

.search-icon {
    display: block !important;
    flex-shrink: 0;
}

.search-submit-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0 14px;
    height: 100%;
    display: flex;
    align-items: center;
}

.results-search-bar:has(.search-input:focus),
.search-bar:has(.search-input:focus) {
    background: var(--search-bar-focused);
}

.results-search-bar:focus-within,
.search-bar:focus-within {
    background: var(--search-bar-focused);
}

[data-theme="light"] .results-search-bar,
[data-theme="light"] .search-bar {
    /* Match examples/theannoying-degoog-extensions/themes/LiterallyGoogle (AGENTS.md: examples/ is reference). */
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--theme-radius-search);
    box-shadow: var(--lg-search-shadow);
    transition:
        box-shadow 0.16s ease,
        border-color 0.16s ease,
        border-radius 0.16s ease;
}

[data-theme="light"] .results-search-bar:hover,
[data-theme="light"] .search-bar:hover {
    box-shadow: var(--lg-search-shadow-hover);
}

/* Merged bar + dropdown only when an AC pane is visibly open (explicit display
   block/flex/grid). Do not key off `.ac-open` alone — core adds that class on
   focus even when the dropdown is empty/hidden on first load. */
[data-theme="light"] :is(.results-search-bar, .search-bar).lg-ac-open {
    border-color: #dadce0;
    border-end-start-radius: 0;
    border-end-end-radius: 0;
    /* Same elevation as the resting search bar — dropdown panes stay shadowless on light. */
    box-shadow: var(--lg-search-shadow);
}

/* Dark / default: merged bar + dropdown — bar carries elevation, pane stays flush (no top shadow). */
[data-theme="dark"] :is(.results-search-bar, .search-bar).lg-ac-open {
    border-end-start-radius: 0;
    border-end-end-radius: 0;
    box-shadow: var(--lg-search-shadow);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) :is(.results-search-bar, .search-bar).lg-ac-open {
        border-end-start-radius: 0;
        border-end-end-radius: 0;
        box-shadow: var(--lg-search-shadow);
    }
}

.ac-dropdown,
.bang-ac-dropdown {
    background: var(--search-bar-focused);
    box-shadow: var(--lg-search-shadow-dropdown);
}

/*
 * Suggestions (`.ac-dropdown`) and bang AC (`.bang-ac-dropdown`) are siblings under the bar.
 * If both are display block/flex, only the active one should cast elevation.
 */
:is(.results-search-bar, .search-bar).lg-ac-dropdown-open > .bang-ac-dropdown {
    box-shadow: none !important;
}

:is(.results-search-bar, .search-bar).lg-bang-ac-dropdown-open > .ac-dropdown {
    box-shadow: none !important;
}

#apps-pocket-panel {
    border-top: 1px solid #5f6368;
    background: var(--search-bar-focused);
    box-shadow: var(--lg-search-shadow);
}

/* Autocomplete: align panel edges to the bar border box (no fractional nudging). */
.results-search-bar > .ac-dropdown,
.results-search-bar > .bang-ac-dropdown,
.search-bar > .ac-dropdown,
.search-bar > .bang-ac-dropdown {
    margin-top: 0;
    inset-inline-start: -1px;
    inset-inline-end: -1px;
    width: auto;
    box-sizing: border-box;
    border-start-start-radius: 0;
    border-start-end-radius: 0;
    border-end-start-radius: var(--theme-radius-search);
    border-end-end-radius: var(--theme-radius-search);
    box-shadow: var(--lg-search-shadow-dropdown);
}

/* Short rule between bar and list when an AC pane is visibly open (not full width). */
:is(.results-search-bar, .search-bar).lg-ac-open::after {
    content: "";
    position: absolute;
    top: 100%;
    inset-inline: 4%;
    height: 1.5px;
    background: var(--border-light);
    opacity: 0.9;
    pointer-events: none;
    z-index: 101;
}

/* Suggestions are plain `.ac-item` text; plugin rows use `.ac-item-icon` in the same column. */
.results-search-bar .ac-item:not(:has(.ac-item-icon)),
.search-bar .ac-item:not(:has(.ac-item-icon)) {
    position: relative;
    padding-inline-start: 2.75rem;
}

.results-search-bar .ac-item:has(.ac-item-icon),
.search-bar .ac-item:has(.ac-item-icon) {
    position: relative;
    padding-inline-start: 2.75rem;
}

.results-search-bar .ac-item .ac-item-icon,
.search-bar .ac-item .ac-item-icon {
    position: absolute;
    inset-inline-start: 0.8rem;
    inset-block-start: 50%;
    transform: translateY(-50%);
    width: 1.125rem;
    height: 1.125rem;
}

.results-search-bar .ac-item:not(:has(.ac-item-icon))::before,
.search-bar .ac-item:not(:has(.ac-item-icon))::before {
    content: "";
    position: absolute;
    inset-inline-start: 0.8rem;
    inset-block-start: 50%;
    transform: translateY(-50%);
    width: 1.125rem;
    height: 1.125rem;
    background-color: var(--text-secondary);
    opacity: 0.75;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M10 3a7 7 0 1 0 3.9 12.8L20.6 22l1.4-1.4-6.7-6.7A7 7 0 0 0 10 3Zm0 2a5 5 0 1 1 0 10 5 5 0 0 1 0-10Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M10 3a7 7 0 1 0 3.9 12.8L20.6 22l1.4-1.4-6.7-6.7A7 7 0 0 0 10 3Zm0 2a5 5 0 1 1 0 10 5 5 0 0 1 0-10Z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Light: upstream-style shadow on suggestions/history (examples/LiterallyGoogle). */
[data-theme="light"] .results-search-bar > .ac-dropdown,
[data-theme="light"] .results-search-bar > .bang-ac-dropdown,
[data-theme="light"] .search-bar > .ac-dropdown,
[data-theme="light"] .search-bar > .bang-ac-dropdown,
[data-theme="light"] #apps-pocket-panel {
    background: var(--search-bar-focused);
    border: 1px solid var(--border);
    border-top: none;
    border-start-start-radius: 0;
    border-start-end-radius: 0;
    border-end-start-radius: var(--theme-radius-search);
    border-end-end-radius: var(--theme-radius-search);
    /* Depth comes from the merged bar rule above; avoid double shadow on light. */
    box-shadow: none !important;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .results-search-bar > .ac-dropdown,
    :root:not([data-theme="dark"]) .results-search-bar > .bang-ac-dropdown,
    :root:not([data-theme="dark"]) .search-bar > .ac-dropdown,
    :root:not([data-theme="dark"]) .search-bar > .bang-ac-dropdown,
    :root:not([data-theme="dark"]) #apps-pocket-panel {
        background: var(--search-bar-focused);
        border: 1px solid var(--border);
        border-top: none;
        border-start-start-radius: 0;
        border-start-end-radius: 0;
        border-end-start-radius: var(--theme-radius-search);
        border-end-end-radius: var(--theme-radius-search);
        box-shadow: none !important;
    }
}

/* OS “follow system” light: same merged-bar shadow when AC panel is open. */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]):not([data-theme="light"]) :is(.results-search-bar, .search-bar).lg-ac-open {
        border-color: #dadce0;
        border-end-start-radius: 0;
        border-end-end-radius: 0;
        box-shadow: var(--lg-search-shadow);
    }
}

.search-btn {
    border-radius: var(--theme-radius-sm);
    font-weight: 500;
}

.lucky-btn {
    width: auto !important;
    min-width: 0 !important;
    padding-inline: 1rem !important;
}

.lucky-long {
    font-size: 0.85em !important;
}

#home-footer a {
    color: #fff;
    font-size: 14px;
}

.footer {
    border-top: 1px solid #444746;
    background: #171717;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .footer {
        border-top: 1px solid #e8eaed;
        background: #fff;
    }

    :root:not([data-theme="dark"]) #home-footer a {
        color: var(--text-secondary);
    }
}

[data-theme="light"] .footer {
    border-top: 1px solid #e8eaed;
    background: #fff;
}

[data-theme="light"] #home-footer a {
    color: var(--text-secondary);
}

/* RESULTS PAGE */

.btn {
    border-radius: var(--theme-radius-sm);
    user-select: none;
    border: 1px solid var(--border);
}

.glance-link {
    color: var(--text-link) !important;
}

.wiki-desc {
    letter-spacing: 0 !important;
    text-transform: none !important;
}

#results-page .sidebar-panel,
#results-page .results-slot-panel,
#results-page .degoog-panel,
#results-page .glance-box,
#results-page .glance-ai,
#results-page .skeleton-sidebar-panel {
    border-radius: var(--theme-radius-lg) !important;
    background: var(--bg-light) !important;
}

.results-tab {
    font-weight: 500;
}


.glance-box {
    margin: 0;
    border-radius: var(--theme-radius-md);
}

/* Core wraps glance content in a slot panel. Keep the nested content layer
   transparent so the outer panel owns the card edge and never clips a second
   rounded surface. */
#results-page .results-slot-panel-body > .glance-box,
#results-page .results-slot-panel-body > .degoog-panel--slot:not(.results-slot-panel),
#results-page #at-a-glance > .glance-box {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* The native loading placeholder is itself a direct glance box, so it needs
   to retain the card surface even though rendered glance content is flattened. */
#results-page #at-a-glance > .glance-box:has(.skeleton-glance),
#results-page #at-a-glance > .glance-box:has(.glance-ai-skeleton) {
    background: var(--bg-light) !important;
    border-radius: var(--theme-radius-lg) !important;
}

.result-title {
    margin-top: 10px;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.result-url-row {
    gap: 12px;
}

.result-favicon {
    border: 1px solid var(--border-light);
}

.result-engine-tag {
    user-select: none;
    font-size: 11px;
    white-space: nowrap;
    flex-shrink: 0;
    color: var(--text-link);
    border: 1px solid var(--border-light);
    background: var(--bg);
    border-radius: var(--theme-radius-pill);
    padding: 6px 12px;
}

.result-engine-tag:hover {
    color: var(--text-primary);
    background: var(--bg-light);
    border-color: var(--bg-hover);
}

/* Image search filters (requires #image-filters-bar in search.html). */
#image-filters-bar {
    display: none;
    position: fixed;
    top: auto;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 0.75rem);
    z-index: 210;
    width: min(23.5rem, calc(100vw - 1.5rem));
    max-width: min(23.5rem, calc(100vw - 1.5rem));
    height: min(44rem, var(--lg-drawer-max-height, calc(100dvh - 1.5rem - env(safe-area-inset-bottom, 0px))));
    max-height: var(--lg-drawer-max-height, calc(100dvh - 1.5rem - env(safe-area-inset-bottom, 0px)));
    background: var(--bg-light);
    border: 1px solid var(--border-light);
    border-radius: clamp(1.5rem, 5vw, 2rem);
    overflow: hidden;
    inset-inline-start: 0.75rem;
    inset-inline-end: auto;
    left: auto;
    right: auto;
    box-shadow: none;
    contain: layout style;
    transform-origin: 1.35rem calc(100% - 1.35rem);
    transform: translate3d(-0.9rem, 0.9rem, 0) scale(0.18);
    transition:
        transform 280ms cubic-bezier(0.2, 0.9, 0.2, 1),
        opacity 180ms ease,
        background 280ms ease,
        border-color 280ms ease,
        backdrop-filter 280ms ease,
        -webkit-backdrop-filter 280ms ease,
        box-shadow 280ms ease,
        visibility 0s linear 180ms;
}

html[dir="rtl"] #image-filters-bar {
    inset-inline-start: auto;
    inset-inline-end: 0.75rem;
    transform-origin: calc(100% - 1.35rem) calc(100% - 1.35rem);
    transform: translate3d(0.9rem, 0.9rem, 0) scale(0.18);
}

#image-filters-bar.lg-image-drawer-animating {
    will-change: width, height, border-radius, inset-inline-start, inset-inline-end, bottom;
    contain: layout paint;
    pointer-events: none;
}

#image-filters-bar.open.lg-image-drawer-animating {
    pointer-events: none;
}

#image-filters-bar.open,
html[dir="rtl"] #image-filters-bar.open {
    transform: translate3d(0, 0, 0) scale(1);
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    background: color-mix(in srgb, var(--bg) 90%, transparent);
    border-color: color-mix(in srgb, var(--border-light) 76%, transparent);
    backdrop-filter: blur(20px) saturate(125%);
    -webkit-backdrop-filter: blur(20px) saturate(125%);
    box-shadow:
        0 28px 64px rgba(0, 0, 0, 0.28),
        0 8px 24px rgba(0, 0, 0, 0.18);
    transition:
        transform 280ms cubic-bezier(0.2, 0.9, 0.2, 1),
        opacity 180ms ease,
        background 280ms ease,
        border-color 280ms ease,
        backdrop-filter 280ms ease,
        -webkit-backdrop-filter 280ms ease,
        box-shadow 280ms ease,
        visibility 0s;
}

#image-filters-bar.open:not(.lg-image-drawer-open-ready) .degoog-img-sidebar-body,
#image-filters-bar.open:not(.lg-image-drawer-open-ready) .degoog-img-sidebar-head {
    opacity: 0;
    pointer-events: none;
}

#image-filters-bar.open.lg-image-drawer-open-ready .degoog-img-sidebar-body,
#image-filters-bar.open.lg-image-drawer-open-ready .degoog-img-sidebar-head {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 140ms ease;
}

#image-filters-bar.lg-image-drawer-animating:not(.open) .degoog-img-sidebar-close.lg-drawer-pull-tab,
#image-filters-bar.lg-image-drawer-animating:not(.open) .degoog-img-sidebar-close.lg-drawer-pull-tab::before {
    /* Show the pull-tab handle immediately on close (not only at animation end). */
    opacity: 1 !important;
}

/* Hide scrollbars while the FAB drawer morphs or is dragged closed (all breakpoints). */
#image-filters-bar.lg-image-drawer-animating:not(.open),
#image-filters-bar.lg-drawer-dragging,
#image-filters-bar.lg-drawer-drag-snap,
#image-filters-bar.lg-image-drawer-animating:not(.open) .degoog-img-sidebar,
#image-filters-bar.lg-image-drawer-animating:not(.open) .degoog-img-sidebar-body,
#image-filters-bar.lg-drawer-dragging .degoog-img-sidebar,
#image-filters-bar.lg-drawer-dragging .degoog-img-sidebar-body,
#image-filters-bar.lg-drawer-drag-snap .degoog-img-sidebar,
#image-filters-bar.lg-drawer-drag-snap .degoog-img-sidebar-body {
    overflow: hidden !important;
    scrollbar-width: none;
}

#image-filters-bar.lg-image-drawer-animating:not(.open)::-webkit-scrollbar,
#image-filters-bar.lg-drawer-dragging::-webkit-scrollbar,
#image-filters-bar.lg-drawer-drag-snap::-webkit-scrollbar,
#image-filters-bar.lg-image-drawer-animating:not(.open)
    .degoog-img-sidebar-body::-webkit-scrollbar,
#image-filters-bar.lg-drawer-dragging .degoog-img-sidebar-body::-webkit-scrollbar,
#image-filters-bar.lg-drawer-drag-snap .degoog-img-sidebar-body::-webkit-scrollbar {
    display: none;
}

.degoog-img-sidebar-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 205;
    background: color-mix(in srgb, var(--bg) 42%, transparent);
    backdrop-filter: blur(0px) saturate(100%);
    -webkit-backdrop-filter: blur(0px) saturate(100%);
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 400ms cubic-bezier(0.4, 0, 0.2, 1),
        backdrop-filter 400ms cubic-bezier(0.4, 0, 0.2, 1),
        -webkit-backdrop-filter 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.degoog-img-sidebar-overlay.open {
    pointer-events: auto;
    opacity: 1;
    backdrop-filter: blur(14px) saturate(110%);
    -webkit-backdrop-filter: blur(14px) saturate(110%);
    transition:
        opacity 400ms cubic-bezier(0.16, 1, 0.3, 1),
        backdrop-filter 400ms cubic-bezier(0.16, 1, 0.3, 1),
        -webkit-backdrop-filter 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

#results-page.lg-image-drawer-animating {
    touch-action: none;
}

@media (prefers-reduced-motion: reduce) {
    #image-filters-bar,
    #image-filters-bar.open,
    .degoog-img-sidebar-overlay,
    .degoog-img-sidebar-overlay.open,
    #results-page.lg-image-fab-filters #lg-image-tools-fab,
    #results-page.lg-image-fab-filters #image-filters-bar {
        transition: none !important;
    }

    #image-filters-bar.open,
    #results-page.lg-image-fab-filters #image-filters-bar.open {
        transform: none !important;
    }

    #image-filters-bar.open:not(.lg-image-drawer-open-ready) .degoog-img-sidebar-body,
    #image-filters-bar.open:not(.lg-image-drawer-open-ready) .degoog-img-sidebar-head {
        opacity: 1;
        pointer-events: auto;
    }
}

@media (min-width: 768px) {
    .degoog-img-sidebar-overlay.open {
        display: none;
        opacity: 0;
    }
}

#lg-image-tools-fab {
    display: none;
}

.degoog-img-filter-bar {
    display: flex;
    gap: 0.5rem;
    padding: 0.25rem 0 0.75rem;
    overflow-x: auto;
    scrollbar-width: none;
    flex-wrap: nowrap;
}

.degoog-img-filter-bar::-webkit-scrollbar {
    display: none;
}

.degoog-img-filter-select-wrap {
    flex-shrink: 0;
}

.degoog-img-filter-select-wrap .degoog-input {
    width: auto;
    min-width: 8rem;
    appearance: none;
    -webkit-appearance: none;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-link);
    background: var(--lg-sidebar-row-surface);
    border: 1px solid var(--border-light);
    border-radius: var(--theme-radius-pill);
    padding: 6px 2rem 6px 12px;
    cursor: pointer;
}

.degoog-img-filter-select-wrap .degoog-input:hover {
    color: var(--text-primary);
    background: var(--lg-row-hover-bg);
    border-color: var(--bg-hover);
}

.degoog-img-filter-select-wrap .degoog-input:focus {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

.sidebar-accordion-body:has(.wiki-card),
.sidebar-accordion-body:has(.kp-title),
.sidebar-accordion-body:has(.kp-description),
.sidebar-accordion-body:has(.kp-image) {
    background: var(--lg-sidebar-row-surface);
    margin: 20px;
}

#results-sidebar .sidebar-accordion.lg-sidebar-knowledge > .sidebar-accordion-body {
    margin: 0;
}

#results-sidebar .sidebar-accordion.lg-sidebar-knowledge.open > .sidebar-accordion-body {
    background: var(--lg-sidebar-row-surface);
    padding: 14px 16px 16px;
    border-start-start-radius: var(--theme-radius-xs);
    border-start-end-radius: var(--theme-radius-xs);
    border-end-start-radius: var(--theme-radius-lg);
    border-end-end-radius: var(--theme-radius-lg);
}

#results-sidebar .sidebar-accordion.lg-sidebar-knowledge.open .wiki-card,
#results-sidebar .sidebar-accordion.lg-sidebar-knowledge.open .sidebar-accordion-body:has(.kp-title) {
    background: transparent;
    border: 0;
    border-radius: 0;
    gap: 0.75rem;
    overflow: visible;
}

#results-sidebar .sidebar-accordion.lg-sidebar-knowledge.open .wiki-title,
#results-sidebar .sidebar-accordion.lg-sidebar-knowledge.open .kp-title {
    display: none;
}

#results-sidebar .sidebar-accordion.lg-sidebar-knowledge .wiki-desc,
#results-sidebar .sidebar-accordion.lg-sidebar-knowledge .kp-description {
    color: var(--text-secondary);
    margin: 0 0 0.75rem;
}

#results-sidebar .sidebar-accordion.lg-sidebar-knowledge .wiki-extract {
    color: var(--text-primary);
    line-height: 1.5;
}

#results-sidebar .sidebar-accordion.lg-sidebar-knowledge .wiki-thumb,
#results-sidebar .sidebar-accordion.lg-sidebar-knowledge .kp-image {
    border-radius: var(--theme-radius-md);
}

.sidebar-accordion-body {
    background: var(--bg);
    padding: 0;
}

/* Engine Performance panel only (theme setting via data-sidebar-panels-desktop). */
@media (min-width: 768px) {
    html[data-sidebar-panels-desktop]
        :is(#results-sidebar, #image-engine-panel)
        .sidebar-accordion.streaming-engine-panel
        .sidebar-accordion-toggle.degoog-accordion-toggle--sidebar,
    html[data-sidebar-panels-desktop]
        :is(#results-sidebar, #image-engine-panel)
        .sidebar-accordion:has(.engine-stat-row)
        .sidebar-accordion-toggle.degoog-accordion-toggle--sidebar {
        display: flex;
    }

    html[data-sidebar-panels-desktop]
        :is(#results-sidebar, #image-engine-panel)
        .sidebar-accordion.streaming-engine-panel:not(.open)
        .sidebar-accordion-body,
    html[data-sidebar-panels-desktop]
        :is(#results-sidebar, #image-engine-panel)
        .sidebar-accordion:has(.engine-stat-row):not(.open)
        .sidebar-accordion-body {
        display: none;
    }

    html[data-sidebar-panels-desktop]
        :is(#results-sidebar, #image-engine-panel)
        .sidebar-accordion.streaming-engine-panel.open
        .sidebar-accordion-body,
    html[data-sidebar-panels-desktop]
        :is(#results-sidebar, #image-engine-panel)
        .sidebar-accordion:has(.engine-stat-row).open
        .sidebar-accordion-body {
        display: block;
    }
}

/* People also search for — respect .open on mobile and desktop. */
@media (max-width: 767px) {
    html[data-related-searches-mobile]
        #results-sidebar
        .sidebar-accordion.related-searches-panel:not(.open)
        > .sidebar-accordion-body,
    html[data-related-searches-mobile]
        #results-sidebar
        .sidebar-accordion:has(.related-search-link):not(.open)
        > .sidebar-accordion-body {
        display: none;
    }

    html[data-related-searches-mobile]
        #results-sidebar
        .sidebar-accordion:has(.related-search-link).open
        > .sidebar-accordion-body {
        display: block;
    }

    html[data-related-searches-mobile]
        #results-sidebar
        .sidebar-accordion.related-searches-panel.open
        > .sidebar-accordion-body:not(:has(.related-search-link)) {
        display: none;
    }
}

@media (min-width: 768px) {
    html[data-related-searches-desktop]
        #results-sidebar
        .sidebar-accordion:has(.related-search-link)
        .sidebar-accordion-toggle.degoog-accordion-toggle--sidebar,
    html[data-related-searches-desktop]
        #results-sidebar
        .sidebar-accordion.related-searches-panel
        .sidebar-accordion-toggle.degoog-accordion-toggle--sidebar {
        display: flex;
    }

    html[data-related-searches-desktop]
        #results-sidebar
        .sidebar-accordion.related-searches-panel:not(.open)
        > .sidebar-accordion-body,
    html[data-related-searches-desktop]
        #results-sidebar
        .sidebar-accordion:has(.related-search-link):not(.open)
        > .sidebar-accordion-body {
        display: none;
    }

    html[data-related-searches-desktop]
        #results-sidebar
        .sidebar-accordion:has(.related-search-link).open
        > .sidebar-accordion-body {
        display: block;
    }

    html[data-related-searches-desktop]
        #results-sidebar
        .sidebar-accordion.related-searches-panel.open
        > .sidebar-accordion-body:not(:has(.related-search-link)) {
        display: none;
    }
}

/* Knowledge panel (Wikipedia / knowledge plugins) — respect .open on mobile and desktop. */
@media (max-width: 767px) {
    html[data-knowledge-panel-mobile]
        #results-sidebar
        .sidebar-accordion.lg-sidebar-knowledge:not(.open)
        .sidebar-accordion-body {
        display: none;
    }

    html[data-knowledge-panel-mobile]
        #results-sidebar
        .sidebar-accordion.lg-sidebar-knowledge.open
        .sidebar-accordion-body {
        display: block;
    }
}

@media (min-width: 768px) {
    html[data-knowledge-panel-desktop]
        #results-sidebar
        .sidebar-accordion.lg-sidebar-knowledge
        .sidebar-accordion-toggle.degoog-accordion-toggle--sidebar {
        display: flex;
    }

    html[data-knowledge-panel-desktop]
        #results-sidebar
        .sidebar-accordion.lg-sidebar-knowledge:not(.open)
        .sidebar-accordion-body {
        display: none;
    }

    html[data-knowledge-panel-desktop]
        #results-sidebar
        .sidebar-accordion.lg-sidebar-knowledge.open
        .sidebar-accordion-body {
        display: block;
    }
}

/* Self-contained knowledge cards (empty slot title) own their entire surface. */
#results-page
    #results-sidebar
    .sidebar-accordion.lg-sidebar-knowledge-self-contained {
    scroll-margin-top: calc(
        var(--literallygoogle-sticky-header-offset, calc(50px + 1.5rem)) + 0.5rem
    );
}

#results-page
    #results-sidebar
    .sidebar-accordion.lg-sidebar-knowledge-self-contained
    > .sidebar-accordion-toggle {
    display: none;
}

#results-page
    #results-sidebar
    .sidebar-accordion.lg-sidebar-knowledge-self-contained
    > .sidebar-accordion-body {
    display: block !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Results sidebar: strip core panel border/shadow; card rows match examples/LiterallyGoogle. */
:is(#results-sidebar, #image-engine-panel) .sidebar-panel {
    border: none !important;
    box-shadow: none !important;
}

/* No placeholder chrome while related queries are still loading. */
#results-sidebar .sidebar-accordion.related-searches-panel:not(:has(.related-search-link)) {
    display: none;
}

#results-sidebar .sidebar-accordion.lg-sidebar-knowledge {
    gap: 0;
}

:is(#results-sidebar, #image-engine-panel) .sidebar-accordion:has(.engine-stat-row),
#results-sidebar .sidebar-accordion:has(.related-search-link),
#results-sidebar .sidebar-accordion.lg-sidebar-knowledge,
:is(#results-sidebar, #image-engine-panel) .sidebar-accordion.streaming-engine-panel {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: visible;
}

:is(#results-sidebar, #image-engine-panel) .sidebar-accordion:has(.engine-stat-row)
    > .sidebar-accordion-toggle.degoog-accordion-toggle--sidebar,
#results-sidebar .sidebar-accordion:has(.related-search-link)
    > .sidebar-accordion-toggle.degoog-accordion-toggle--sidebar,
#results-sidebar .sidebar-accordion.lg-sidebar-knowledge
    > .sidebar-accordion-toggle.degoog-accordion-toggle--sidebar,
:is(#results-sidebar, #image-engine-panel) .sidebar-accordion.streaming-engine-panel
    > .sidebar-accordion-toggle.degoog-accordion-toggle--sidebar {
    background: var(--lg-sidebar-row-surface);
    border-start-start-radius: var(--theme-radius-lg);
    border-start-end-radius: var(--theme-radius-lg);
    border-end-start-radius: var(--theme-radius-lg);
    border-end-end-radius: var(--theme-radius-lg);
    box-sizing: border-box;
    width: 100%;
}

:is(#results-sidebar, #image-engine-panel) .sidebar-accordion:has(.engine-stat-row).open
    > .sidebar-accordion-toggle.degoog-accordion-toggle--sidebar,
#results-sidebar .sidebar-accordion:has(.related-search-link).open
    > .sidebar-accordion-toggle.degoog-accordion-toggle--sidebar,
#results-sidebar .sidebar-accordion.lg-sidebar-knowledge.open
    > .sidebar-accordion-toggle.degoog-accordion-toggle--sidebar,
:is(#results-sidebar, #image-engine-panel) .sidebar-accordion.streaming-engine-panel.open
    > .sidebar-accordion-toggle.degoog-accordion-toggle--sidebar {
    border-end-start-radius: var(--theme-radius-xs);
    border-end-end-radius: var(--theme-radius-xs);
}

:is(#results-sidebar, #image-engine-panel) .sidebar-accordion:has(.engine-stat-row)
    > .sidebar-accordion-body,
:is(#results-sidebar, #image-engine-panel) .sidebar-accordion.streaming-engine-panel
    > .sidebar-accordion-body {
    max-height: none !important;
    overflow: visible !important;
}

.engine-stat-row {
    border-radius: var(--theme-radius-xs);
    background: var(--lg-sidebar-row-surface);
    padding: 14px;
    margin-bottom: 2px;
}

.engine-stat-row:first-child,
.related-search-link:first-child {
    border-start-start-radius: var(--theme-radius-xs);
    border-start-end-radius: var(--theme-radius-xs);
}

.engine-stat-row:last-child:not(:only-child) {
    margin-bottom: 0;
    border-end-end-radius: var(--theme-radius-md);
    border-end-start-radius: var(--theme-radius-md);
}

.engine-stat-row:only-child {
    margin-bottom: 0;
}

:is(#results-sidebar, #image-engine-panel) .engine-stat-row {
    cursor: pointer;
    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease;
}

:is(#results-sidebar, #image-engine-panel) .engine-stat-row:hover:not(.lg-engine-stat-row--active) {
    background: var(--lg-row-hover-bg);
    box-shadow: var(--lg-row-hover-shadow);
}

:is(#results-sidebar, #image-engine-panel) .engine-stat-row.lg-engine-stat-row--active {
    background: var(--lg-selection-active-bg);
    box-shadow: inset 0 0 0 2px var(--lg-selection-active-ring);
    color: var(--text-primary);
}

:is(#results-sidebar, #image-engine-panel) .engine-stat-row.lg-engine-stat-row--active .engine-stat-label,
:is(#results-sidebar, #image-engine-panel) .engine-stat-row.lg-engine-stat-row--active .engine-stat-meta {
    color: inherit;
}

:is(#results-sidebar, #image-engine-panel) .engine-retry-link {
    color: var(--lg-selection-accent, #9ac1fd);
}

:is(#results-sidebar, #image-engine-panel) .engine-stat-row.lg-engine-stat-row--active .engine-retry-link {
    color: var(--lg-selection-accent, #9ac1fd);
}

.result-item.lg-engine-filtered-out,
.image-card.lg-engine-filtered-out,
.video-card.lg-engine-filtered-out {
    display: none !important;
}

.result-item.lg-client-page-hidden,
.degoog-result.lg-client-page-hidden {
    display: none !important;
}

.related-search-link {
    display: block;
    padding: 14px;
    border-bottom: 0;
    margin-bottom: 2px;
    font-size: 14px;
    background: var(--lg-sidebar-row-surface);
    border-radius: var(--theme-radius-xs);
}

.related-search-link:last-child:not(:only-child) {
    margin-bottom: 0;
    border-end-start-radius: var(--theme-radius-md);
    border-end-end-radius: var(--theme-radius-md);
}

.related-search-link:only-child {
    margin-bottom: 0;
    border-end-start-radius: var(--theme-radius-md);
    border-end-end-radius: var(--theme-radius-md);
}

body {
    animation: fade 0.4s forwards;
}

@keyframes fade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   STICKY HEADER
   Desktop only — on mobile the header scrolls normally.
   ══════════════════════════════════════════════════════════════════════════ */

/* Above-results slots (e.g. OSM Leaflet) must not paint over the search bar / AC. */
#results-header {
    position: relative;
    z-index: 120;
    background: var(--bg) !important;
}

@media (max-width: 767px) {
    #results-header {
        align-items: center;
    }

    #results-header > .results-logo {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
        line-height: 1;
        margin-block: 0;
    }

    #results-header > :is(#nav-settings-results, #apps-pocket-toggle, .apps-pocket-toggle),
    #results-header > button[aria-label="Apps"] {
        align-self: center;
        margin-block: 0;
        transform: none;
    }
}

/* Settings gear hover spin: cancel the small upward nudge. */
:is(#nav-settings-top, #nav-settings-results) svg {
    position: relative;
    top: 0;
}
:is(#nav-settings-top, #nav-settings-results):hover svg,
:is(#nav-settings-top, #nav-settings-results):focus-visible svg {
    top: 2px;
}

@media (min-width: 768px) {
    html {
        overflow-x: clip;
    }

    body {
        overflow-x: clip;
    }

    #results-page {
        /* Resolve the alias here so runtime main-column overrides are honored;
           defining it on :root would freeze the computed value at 48rem. */
        --literallygoogle-results-rail-inline-size: var(
            --literallygoogle-results-main-col-max
        );
        --degoog-results-rail-inline-size: var(
            --literallygoogle-results-rail-inline-size
        );
        --literallygoogle-sticky-header-offset: calc(
            var(--literallygoogle-search-shell-height) + 1.5rem
        );
        --literallygoogle-sticky-sidebar-gap: 0.5rem;
        /* Set at runtime when stuck: mirror the header-to-sidebar gap below. */
        --literallygoogle-sidebar-bottom-inset: 0px;
        overflow-x: clip;
        max-width: 100%;
    }

    #results-header {
        position: sticky;
        top: 0;
        z-index: 120;
        background-color: var(--bg);
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }

    #results-header.scrolled {
        border-bottom: 1px solid var(--border-light);
    }

    #results-page #results-tabs,
    #results-page #results-meta {
        margin-inline-start: 0;
        padding-inline-start: var(
            --literallygoogle-results-content-inline-start
        );
        padding-inline-end: var(--literallygoogle-results-content-inline-end);
    }

    /* Override core #results-meta shorthand padding — keep theme gutters only. */
    #results-page #results-meta {
        padding-block: 0.75rem;
    }
}

/* The body grid shrink-wraps at desktop widths. Tabs keep a full-width bottom
   border, while their controls and the status row align to the primary rail. */
@media (min-width: 768px) {
    #results-page:not(:has(#results-layout.media-mode)):not(.lg-command-mode)
        #results-layout {
        width: fit-content;
        max-width: min(100%, var(--literallygoogle-results-layout-max));
        margin-inline-end: auto;
    }
}

/* RESULTS LAYOUT (DESKTOP — two-column grid engages at 768px) */

@media (min-width: 768px) {
    /* Two-column grid: main column (slot + results) never shares width with the
       sidebar. Absolute sidebar overlap is avoided — column 2 is reserved. */
    #results-page:not(:has(#results-layout.media-mode)):not(.lg-command-mode) #results-layout {
        position: relative;
        display: grid;
        grid-template-columns: var(
            --lg-results-grid-columns,
            minmax(0, var(--literallygoogle-results-main-col-max))
                minmax(
                    var(--literallygoogle-results-sidebar-col),
                    var(--literallygoogle-results-sidebar-col)
                )
        );
        column-gap: var(--literallygoogle-results-column-gap);
        row-gap: 0;
        align-items: start;
        max-width: var(--literallygoogle-results-layout-max);
        margin-top: 0.5rem;
        margin-inline-start: 0;
        margin-inline-end: auto;
        padding-block: 0;
        padding-inline-start: var(
            --literallygoogle-results-content-inline-start
        );
        padding-inline-end: var(--literallygoogle-results-content-inline-end);
    }

    #results-page #results-main {
        grid-column: 1;
        grid-row: auto;
        width: 100%;
        max-width: var(--literallygoogle-results-main-col-max);
    }

    #sidebar-col {
        position: static;
        grid-column: 2;
        grid-row: 1 / span 30;
        align-self: start;
        width: 100%;
        max-width: var(--literallygoogle-results-sidebar-col);
        justify-self: stretch;
    }

    html[dir="rtl"] #results-page #results-main {
        grid-column: 2;
    }

    html[dir="rtl"] #sidebar-col {
        grid-column: 1;
    }

    #results-sidebar,
    #slot-above-sidebar,
    #slot-below-sidebar {
        margin-top: 0;
    }

    /* Core caps .glance-box / skeletons at 40.75rem — match main column width. */
    #results-page .glance-box {
        max-width: var(--literallygoogle-results-main-col-max);
    }

    #results-page .skeleton-card {
        max-width: var(--literallygoogle-results-main-col-max);
    }

    /* Images/videos: flex row for media-preview (core .media-mode). Padding/gap
       come from degoog core `#results-layout` / `.media-mode` — see
       examples/theannoying-degoog-extensions/themes/LiterallyGoogle (no overrides). */
    #results-page:is(
            :has(#results-tabs .results-tab[data-type="images"].active),
            :has(
                #results-tabs
                    .results-tab[data-type="images"][aria-selected="true"]
            ),
            :has(#results-tabs .results-tab[data-type="videos"].active),
            :has(
                #results-tabs
                    .results-tab[data-type="videos"][aria-selected="true"]
            ),
            :has(#results-list .image-card),
            :has(#results-list .video-card)
        )
        #results-layout {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        max-width: none;
        margin-inline: 0;
        margin-top: 0.5rem;
    }

    #results-page:is(
            :has(#results-tabs .results-tab[data-type="images"].active),
            :has(
                #results-tabs
                    .results-tab[data-type="images"][aria-selected="true"]
            ),
            :has(#results-tabs .results-tab[data-type="videos"].active),
            :has(
                #results-tabs
                    .results-tab[data-type="videos"][aria-selected="true"]
            ),
            :has(#results-list .image-card),
            :has(#results-list .video-card)
        )
        #results-main {
        flex: 1;
        min-width: 0;
        max-width: none;
    }

    #results-page:is(
            :has(#results-tabs .results-tab[data-type="images"].active),
            :has(
                #results-tabs
                    .results-tab[data-type="images"][aria-selected="true"]
            ),
            :has(#results-tabs .results-tab[data-type="videos"].active),
            :has(
                #results-tabs
                    .results-tab[data-type="videos"][aria-selected="true"]
            ),
            :has(#results-list .image-card),
            :has(#results-list .video-card)
        )
        #sidebar-col {
        display: none;
    }

    /*
     * Images/videos tab: flex row can barely exceed the viewport during resize.
     * Clip overflow instead of allowing a horizontal scroll track.
     */
    #results-page:is(
            :has(#results-tabs .results-tab[data-type="images"].active),
            :has(
                #results-tabs
                    .results-tab[data-type="images"][aria-selected="true"]
            ),
            :has(#results-list .image-card)
        )
        #results-layout {
        max-width: 100%;
        box-sizing: border-box;
        min-width: 0;
        overflow-x: clip;
    }

    #results-page:is(
            :has(#results-tabs .results-tab[data-type="images"].active),
            :has(
                #results-tabs
                    .results-tab[data-type="images"][aria-selected="true"]
            ),
            :has(#results-list .image-card)
        )
        #results-main {
        flex: 1 1 0;
        min-width: 0;
        overflow-x: clip;
    }

    #results-page:is(
            :has(#results-tabs .results-tab[data-type="images"].active),
            :has(
                #results-tabs
                    .results-tab[data-type="images"][aria-selected="true"]
            ),
            :has(#results-list .image-card)
        )
        #image-filters-bar {
        flex-shrink: 0;
        min-width: 0;
    }

    /*
     * Videos tab only: slow/narrow resize can overflow the flex row because the
     * preview panel stays at 26.25rem. Images tab does not hit this in practice.
     */
    #results-page:is(
            :has(#results-tabs .results-tab[data-type="videos"].active),
            :has(
                #results-tabs
                    .results-tab[data-type="videos"][aria-selected="true"]
            ),
            :has(#results-list .video-card)
        )
        #results-layout {
        max-width: 100%;
        box-sizing: border-box;
    }

    #results-page:is(
            :has(#results-tabs .results-tab[data-type="videos"].active),
            :has(
                #results-tabs
                    .results-tab[data-type="videos"][aria-selected="true"]
            ),
            :has(#results-list .video-card)
        )
        #results-main {
        flex: 1 1 0;
        min-width: 0;
        overflow-x: hidden;
    }

    #results-page:is(
            :has(#results-tabs .results-tab[data-type="videos"].active),
            :has(
                #results-tabs
                    .results-tab[data-type="videos"][aria-selected="true"]
            ),
            :has(#results-list .video-card)
        )
        #slot-above-results {
        min-width: 0;
    }

    #results-page:has(#results-layout.media-mode)
        #results-layout:not(:has(#media-preview-panel.open)) {
        display: flex;
        max-width: none;
        width: 100%;
    }

    #results-page:has(#results-layout.media-mode)
        #results-layout:not(:has(#media-preview-panel.open))
        #results-main {
        width: 100%;
        max-width: none;
    }

    #results-page:has(#results-layout.media-mode) .skeleton-image-grid,
    #results-page:has(#results-layout.media-mode) .skeleton-video-grid {
        width: 100%;
        max-width: none;
        box-sizing: border-box;
    }
}

/*
 * Video grid: degoog core uses multi-column (column-count), which lays out
 * top-to-bottom within each column. Document order then follows that column
 * flow, so keyboard / preview “next” moves vertically. Use row-major grid
 * so order matches left-to-right, top-to-bottom (same reading order as the
 * image grid’s flex columns).
 */
.video-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    padding: 1rem 0;
    column-count: unset;
}

@media (min-width: 800px) {
    .video-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1400px) {
    .video-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.video-grid .video-card {
    margin-bottom: 0;
    min-width: 0;
}

/*
 * Images / videos: shared horizontal gutter, left-aligned engine pills,
 * and image filter bar aligned with the grid (not logo-offset web padding).
 */
#results-page:is(
        :has(#results-tabs .results-tab[data-type="images"].active),
        :has(
            #results-tabs
                .results-tab[data-type="images"][aria-selected="true"]
        ),
        :has(#results-tabs .results-tab[data-type="videos"].active),
        :has(
            #results-tabs
                .results-tab[data-type="videos"][aria-selected="true"]
        ),
        :has(#results-list .image-card),
        :has(#results-list .video-card)
    ) {
    --theme-media-inline-gutter: 0.75rem;
}

#results-page:is(
        :has(#results-tabs .results-tab[data-type="images"].active),
        :has(
            #results-tabs
                .results-tab[data-type="images"][aria-selected="true"]
        ),
        :has(#results-tabs .results-tab[data-type="videos"].active),
        :has(
            #results-tabs
                .results-tab[data-type="videos"][aria-selected="true"]
        ),
        :has(#results-list .image-card),
        :has(#results-list .video-card)
    )
    #results-layout {
    padding-inline-start: var(--theme-media-inline-gutter);
    padding-inline-end: var(--theme-media-inline-gutter);
}

#results-page:has(#results-list .skeleton-image-grid) {
    --theme-media-inline-gutter: 0.75rem;
}

#results-page[data-lg-search-type="images"] {
    --theme-media-inline-gutter: 0.75rem;
}

#results-page:has(#results-list .skeleton-image-grid) #results-layout {
    padding-inline-start: var(--theme-media-inline-gutter);
    padding-inline-end: var(--theme-media-inline-gutter);
}

.lg-media-engine-pills {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: max-content;
    min-width: 100%;
    padding: 0;
}

.lg-media-engine-rail {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0;
    position: relative;
    z-index: 6;
}

.lg-media-engine-rail-placeholder {
    flex: 1 1 auto;
    min-width: 0;
    visibility: hidden;
    pointer-events: none;
}

.lg-media-engine-rail-placeholder[hidden] {
    display: none;
}

.lg-media-engine-rail.lg-media-engine-rail--stuck {
    position: fixed;
    top: var(--lg-engine-rail-top, 0px);
    z-index: 119;
    min-width: 0;
    max-width: none;
}

.lg-media-engine-pills__scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    min-width: 0;
    flex: 1 1 auto;
    padding-inline-start: 0;
    padding-inline-end: 1rem;
}

.lg-media-engine-pills__scroll::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.lg-media-engine-nav {
    position: absolute;
    top: 50%;
    z-index: 10;
    width: 30px;
    height: 30px;
    padding: 0;
    margin: 0;
    border: 1px solid var(--border-light);
    border-radius: 50%;
    background: var(--bg-light);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 0.18s ease,
        background-color 0.15s ease,
        color 0.15s ease;
    transform: translateY(-50%);
}

.lg-media-engine-nav--prev {
    inset-inline-start: 0.15rem;
}

.lg-media-engine-nav--next {
    inset-inline-end: 0.15rem;
}

.lg-media-engine-rail:hover .lg-media-engine-nav:not(:disabled),
.lg-media-engine-rail:focus-within .lg-media-engine-nav:not(:disabled) {
    opacity: 1;
    pointer-events: auto;
}

@media (hover: none) {
    .lg-media-engine-rail .lg-media-engine-nav:not(:disabled) {
        opacity: 1;
        pointer-events: auto;
    }
}

.lg-media-engine-nav:hover,
.lg-media-engine-nav:focus-visible {
    color: var(--primary, #1a73e8);
    outline: none;
}

.lg-media-engine-nav:focus-visible {
    outline: 0;
}

.lg-media-engine-nav:disabled {
    opacity: 0 !important;
    visibility: hidden;
    pointer-events: none !important;
}

.lg-media-engine-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex: 0 0 auto;
    min-width: 0;
    padding: 0.45rem 0.8rem;
    border: 1px solid var(--border-light);
    border-radius: var(--theme-radius-pill);
    background: var(--lg-sidebar-row-surface);
    color: var(--text-secondary);
    cursor: pointer;
    transition:
        background-color 140ms ease,
        border-color 140ms ease,
        box-shadow 140ms ease,
        color 140ms ease;
}

.lg-media-engine-pill:hover {
    background: var(--lg-row-hover-bg);
    border-color: var(--border-light);
    box-shadow: var(--lg-row-hover-shadow);
}

.lg-media-engine-pill.is-active {
    background: var(--lg-selection-active-bg);
    border-color: color-mix(in srgb, var(--lg-selection-accent) 42%, var(--border-light));
    box-shadow: inset 0 0 0 1px var(--lg-selection-active-ring);
}

.lg-media-engine-pill__label {
    font-size: 0.78rem;
    font-weight: 500;
    white-space: nowrap;
}

.lg-media-engine-pill__meta {
    font-size: 0.72rem;
    white-space: nowrap;
    color: var(--text-secondary);
}

@media (min-width: 768px) {
    #results-page:is(
            :has(#results-tabs .results-tab[data-type="images"].active),
            :has(
                #results-tabs
                    .results-tab[data-type="images"][aria-selected="true"]
            ),
            :has(#results-tabs .results-tab[data-type="videos"].active),
            :has(
                #results-tabs
                    .results-tab[data-type="videos"][aria-selected="true"]
            ),
            :has(#results-list .image-card),
            :has(#results-list .video-card)
        ) {
        --theme-media-inline-gutter: 0.75rem;
    }

    #results-page:is(
            [data-lg-search-type="images"],
            [data-lg-search-type="videos"],
            :has(#results-tabs .results-tab[data-type="images"].active),
            :has(
                #results-tabs
                    .results-tab[data-type="images"][aria-selected="true"]
            ),
            :has(
                #results-tabs
                    .results-tab[data-type="tab:engine:images"].active
            ),
            :has(
                #results-tabs
                    .results-tab[data-type="tab:engine:images"][aria-selected="true"]
            ),
            :has(#results-tabs .results-tab[data-type="videos"].active),
            :has(
                #results-tabs
                    .results-tab[data-type="videos"][aria-selected="true"]
            ),
            :has(
                #results-tabs
                    .results-tab[data-type="tab:engine:videos"].active
            ),
            :has(
                #results-tabs
                    .results-tab[data-type="tab:engine:videos"][aria-selected="true"]
            ),
            :has(#results-list .image-card),
            :has(#results-list .video-card),
            :has(#results-list .skeleton-image-grid)
        )
        #results-meta {
        --lg-media-meta-left-gap: calc(
            var(--theme-media-inline-gutter, 0.75rem) +
                var(--lg-image-selection-ring, 0.375rem)
        );
        --lg-media-meta-right-gap-fallback: var(--theme-media-inline-gutter);
        flex-wrap: nowrap;
        max-width: none;
        align-items: center;
        width: 100%;
        box-sizing: border-box;
        padding-inline-start: var(--lg-media-meta-left-gap);
        padding-inline-end: var(--lg-media-meta-right-gap, var(--lg-media-meta-right-gap-fallback));
    }

    #results-page:is(
            :has(#results-tabs .results-tab[data-type="images"].active),
            :has(
                #results-tabs
                    .results-tab[data-type="images"][aria-selected="true"]
            ),
            :has(#results-tabs .results-tab[data-type="videos"].active),
            :has(
                #results-tabs
                    .results-tab[data-type="videos"][aria-selected="true"]
            ),
            :has(#results-list .image-card),
            :has(#results-list .video-card)
        )
        #results-meta
        .results-meta-stats {
        margin-inline-start: auto;
        text-align: end;
    }

    #results-page[data-lg-search-type="images"].lg-image-fab-filters
        #image-filters-bar
        #image-engine-panel {
        display: none;
    }

    #results-page[data-lg-search-type="images"].lg-image-fab-filters
        #image-filters-bar
        :is(
            #image-engine-panel,
            .sidebar-accordion:has(.engine-stat-row),
            .sidebar-accordion.streaming-engine-panel,
            #image-engine-panel .sidebar-panel,
            #image-engine-panel .sidebar-accordion,
            #image-engine-panel .engine-stat-row
        ) {
        display: none !important;
    }

    body > #image-filters-bar.lg-image-fab-drawer
        :is(
            #image-engine-panel,
            .sidebar-accordion:has(.engine-stat-row),
            .sidebar-accordion.streaming-engine-panel,
            #image-engine-panel .sidebar-panel,
            #image-engine-panel .sidebar-accordion,
            #image-engine-panel .engine-stat-row
        ) {
        display: none !important;
    }

    #results-page:is(
            :has(#results-tabs .results-tab[data-type="images"].active),
            :has(
                #results-tabs
                    .results-tab[data-type="images"][aria-selected="true"]
            ),
            :has(#results-list .image-card)
        )
        #results-layout {
        gap: var(--literallygoogle-media-row-gap);
        min-width: 0;
    }

    #results-page:not([data-lg-search-type="images"])
        .lg-media-engine-rail.lg-media-engine-rail--stuck,
    #results-page:not(:has(#results-list .image-card))
        .lg-media-engine-rail.lg-media-engine-rail--stuck {
        position: static;
        inset: auto;
        padding: 0;
        background: transparent;
        backdrop-filter: none;
        box-shadow: none;
    }

    #results-page:is(
            :has(#results-tabs .results-tab[data-type="images"].active),
            :has(
                #results-tabs
                    .results-tab[data-type="images"][aria-selected="true"]
            ),
            :has(#results-list .image-card)
        )
        #results-main {
        order: var(--literallygoogle-image-results-order);
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }

    #results-page:is(
            :has(#results-tabs .results-tab[data-type="images"].active),
            :has(
                #results-tabs
                    .results-tab[data-type="images"][aria-selected="true"]
            ),
            :has(#results-list .image-card)
        )
        #image-filters-bar {
        order: var(--literallygoogle-image-organizers-order);
        flex: 0 0 var(--literallygoogle-media-filter-width);
        width: var(--literallygoogle-media-filter-width);
        min-width: 0;
        max-width: var(--literallygoogle-media-filter-width);
        align-self: start;
        box-sizing: border-box;
        position: sticky;
        top: var(
            --literallygoogle-sticky-header-offset,
            calc(50px + 1.5rem)
        );
        bottom: auto;
        inset-inline-start: auto;
        inset-inline-end: auto;
        left: auto;
        right: auto;
        height: calc(
            100vh -
                var(
                    --literallygoogle-sticky-header-offset,
                    calc(50px + 1.5rem)
                )
        );
        max-height: calc(
            100vh -
                var(
                    --literallygoogle-sticky-header-offset,
                    calc(50px + 1.5rem)
                )
        );
        margin: 0;
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
        padding-inline: 0;
        padding-block-start: 0;
        transform: none;
        z-index: 1;
    }

    #results-page:is(
            :has(#results-tabs .results-tab[data-type="images"].active),
            :has(
                #results-tabs
                    .results-tab[data-type="images"][aria-selected="true"]
            ),
            :has(#results-list .image-card)
        )
        #media-preview-panel {
        order: var(--literallygoogle-image-preview-order);
    }

    #results-page:is(
            :has(#results-tabs .results-tab[data-type="images"].active),
            :has(
                #results-tabs
                    .results-tab[data-type="images"][aria-selected="true"]
            ),
            :has(#results-list .image-card)
        )
        #results-layout:not(:has(#media-preview-panel.open))
        #results-main {
        flex: 1 1 0;
        width: auto;
        max-width: none;
    }

    #results-page:is(
            :has(#results-tabs .results-tab[data-type="images"].active),
            :has(
                #results-tabs
                    .results-tab[data-type="images"][aria-selected="true"]
            ),
            :has(#results-list .image-card)
        )
        #sidebar-col {
        display: none;
    }

    html[data-image-mode-desktop-layout="preview-left"]
        #results-page:is(
            :has(#results-tabs .results-tab[data-type="images"].active),
            :has(
                #results-tabs
                    .results-tab[data-type="images"][aria-selected="true"]
            ),
            :has(#results-list .image-card)
        )
        #media-preview-panel,
    html[data-image-mode-desktop-layout="fab-right"]
        #results-page:is(
            :has(#results-tabs .results-tab[data-type="images"].active),
            :has(
                #results-tabs
                    .results-tab[data-type="images"][aria-selected="true"]
            ),
            :has(#results-list .image-card)
        )
        #media-preview-panel {
        transform: translateX(-1rem) scale(0.975);
        transform-origin: left center;
    }

    #results-page:is(
            :has(#results-tabs .results-tab[data-type="images"].active),
            :has(
                #results-tabs
                    .results-tab[data-type="images"][aria-selected="true"]
            ),
            :has(#results-tabs .results-tab[data-type="videos"].active),
            :has(
                #results-tabs
                    .results-tab[data-type="videos"][aria-selected="true"]
            ),
            :has(#results-list .image-card),
            :has(#results-list .video-card)
        )
        #image-filters-bar {
        margin-inline: 0;
    }

    /* Keep the image-mode desktop rail pinned during loading skeletons after
       filter changes, when core temporarily swaps out `.image-card`s. */
    #results-page:has(#results-list .skeleton-image-grid) #results-layout {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        max-width: none;
        margin-inline: 0;
        margin-top: 0.5rem;
        gap: var(--literallygoogle-media-row-gap);
        min-width: 0;
    }

    #results-page:has(#results-list .skeleton-image-grid) #results-main {
        order: var(--literallygoogle-image-results-order);
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        max-width: none;
    }

    #results-page:has(#results-list .skeleton-image-grid) #image-filters-bar {
        order: var(--literallygoogle-image-organizers-order);
        flex: 0 0 var(--literallygoogle-media-filter-width);
        width: var(--literallygoogle-media-filter-width);
        min-width: 0;
        max-width: var(--literallygoogle-media-filter-width);
        align-self: start;
        box-sizing: border-box;
        position: sticky;
        top: var(
            --literallygoogle-sticky-header-offset,
            calc(50px + 1.5rem)
        );
        bottom: auto;
        inset-inline-start: auto;
        inset-inline-end: auto;
        left: auto;
        right: auto;
        height: calc(
            100vh -
                var(
                    --literallygoogle-sticky-header-offset,
                    calc(50px + 1.5rem)
                )
        );
        max-height: calc(
            100vh -
                var(
                    --literallygoogle-sticky-header-offset,
                    calc(50px + 1.5rem)
                )
        );
        margin: 0;
        margin-inline: 0;
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
        padding-inline: 0;
        padding-block-start: 0;
        transform: none;
        z-index: 1;
    }

    #results-page:has(#results-list .skeleton-image-grid) #media-preview-panel {
        order: var(--literallygoogle-image-preview-order);
    }

    #results-page:has(#results-list .skeleton-image-grid)
        #results-layout:not(:has(#media-preview-panel.open))
        #results-main {
        flex: 1 1 0;
        width: auto;
        max-width: none;
    }

    #results-page:has(#results-list .skeleton-image-grid) #sidebar-col {
        display: none;
    }

    html[data-image-mode-desktop-layout="preview-left"]
        #results-page:has(#results-list .skeleton-image-grid)
        #media-preview-panel,
    html[data-image-mode-desktop-layout="fab-right"]
        #results-page:has(#results-list .skeleton-image-grid)
        #media-preview-panel {
        transform: translateX(-1rem) scale(0.975);
        transform-origin: left center;
    }

    /* Apply the same pinned image-mode desktop layout immediately on tab
       switch, before image cards or skeletons are rendered. */
    #results-page[data-lg-search-type="images"] #results-layout {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        max-width: none;
        margin-inline: 0;
        margin-top: 0.5rem;
        gap: var(--literallygoogle-media-row-gap);
        min-width: 0;
    }

    #results-page[data-lg-search-type="images"] #results-main {
        order: var(--literallygoogle-image-results-order);
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        max-width: none;
    }

    #results-page[data-lg-search-type="images"] #image-filters-bar {
        order: var(--literallygoogle-image-organizers-order);
        flex: 0 0 var(--literallygoogle-media-filter-width);
        width: var(--literallygoogle-media-filter-width);
        min-width: 0;
        max-width: var(--literallygoogle-media-filter-width);
        align-self: start;
        box-sizing: border-box;
        position: sticky;
        top: var(
            --literallygoogle-sticky-header-offset,
            calc(50px + 1.5rem)
        );
        bottom: auto;
        inset-inline-start: auto;
        inset-inline-end: auto;
        left: auto;
        right: auto;
        height: calc(
            100vh -
                var(
                    --literallygoogle-sticky-header-offset,
                    calc(50px + 1.5rem)
                )
        );
        max-height: calc(
            100vh -
                var(
                    --literallygoogle-sticky-header-offset,
                    calc(50px + 1.5rem)
                )
        );
        margin: 0;
        margin-inline: 0;
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
        padding-inline: 0;
        padding-block-start: 0;
        transform: none;
        z-index: 1;
    }

    #results-page[data-lg-search-type="images"] #media-preview-panel {
        order: var(--literallygoogle-image-preview-order);
    }

    #results-page[data-lg-search-type="images"]
        #results-layout:not(:has(#media-preview-panel.open))
        #results-main {
        flex: 1 1 0;
        width: auto;
        max-width: none;
    }

    #results-page[data-lg-search-type="images"] #sidebar-col {
        display: none;
    }

    #results-page:is(
            :has(#results-tabs .results-tab[data-type="images"].active),
            :has(
                #results-tabs
                    .results-tab[data-type="images"][aria-selected="true"]
            ),
            :has(#results-list .image-card)
        )
        #results-main
        #at-a-glance:empty,
    #results-page[data-lg-search-type="images"] #results-main #at-a-glance:empty,
    #results-page:has(#results-list .skeleton-image-grid) #results-main #at-a-glance:empty {
        display: none;
        margin: 0;
    }

    #results-page:is(
            :has(#results-tabs .results-tab[data-type="images"].active),
            :has(
                #results-tabs
                    .results-tab[data-type="images"][aria-selected="true"]
            ),
            :has(#results-list .image-card)
        )
        #results-list
        .image-grid,
    #results-page[data-lg-search-type="images"] #results-list .image-grid,
    #results-page:has(#results-list .skeleton-image-grid) .skeleton-image-grid {
        padding-top: 0;
        /* Room for `.image-card.selected` ring (::before inset) on first/last columns. */
        padding-inline: var(--lg-image-selection-ring);
        box-sizing: border-box;
    }

    #results-list .image-grid > .image-column {
        overflow: visible;
    }

    /* Live column fold while the preview pane opens — shrink columns, then hide extras. */
    #results-list .image-grid.lg-image-grid-fold {
        --lg-col-min: 96px;
    }

    #results-page:has(#media-preview-panel.open) #results-list .image-grid.lg-image-grid-fold > .image-column {
        flex: 1 1 0;
        min-width: var(--lg-col-min, 96px);
        max-width: 100%;
        transition:
            flex-basis 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
            min-width 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
            max-width 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
            width 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
            opacity 200ms ease;
    }

    #results-list .image-grid.lg-image-grid-fold > .image-column {
        flex: 1 1 0;
        min-width: var(--lg-col-min, 96px);
        max-width: 100%;
    }

    #results-page:not(:has(#media-preview-panel.open))
        #results-list
        .image-grid.lg-image-grid-fold
        > .image-column {
        transition: none !important;
    }

    #results-list .image-grid.lg-image-grid-fold > .image-column.lg-image-col-hidden {
        flex: 0 0 0 !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        margin: 0 !important;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
    }

    #results-page:has(#media-preview-panel.open) #results-list .image-grid.lg-image-grid-fold .image-thumb-wrap,
    #results-page:has(#media-preview-panel.open) #results-list .image-grid.lg-image-grid-fold .image-thumb {
        transition: width 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    #results-page:not(:has(#media-preview-panel.open))
        #results-list
        .image-grid.lg-image-grid-fold
        :is(.image-thumb-wrap, .image-thumb) {
        transition: none !important;
    }

    #results-page .image-card.selected {
        outline: none;
        opacity: 1 !important;
        position: relative;
        z-index: 2;
        overflow: visible;
    }

    /* Core degoog dims the selected thumb for overlay-style metadata; we show
       title/source below the image instead — keep the thumb at full brightness. */
    #results-page #results-list .image-card.selected .image-thumb {
        filter: none !important;
    }

    #results-page .image-card.selected::before {
        content: "";
        position: absolute;
        inset: -0.25rem;
        border-radius: calc(var(--theme-radius-md) + 0.25rem);
        background: color-mix(in srgb, var(--primary) 24%, var(--bg));
        box-shadow:
            inset 0 0 0 2px color-mix(in srgb, var(--primary) 88%, white 12%),
            0 1px 3px color-mix(in srgb, var(--primary) 18%, transparent);
        pointer-events: none;
        z-index: -1;
    }

    #results-page .image-card.selected .image-thumb-wrap {
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 26%, transparent);
    }

    #results-page .image-card.selected .image-thumb-wrap::after {
        content: "";
        position: absolute;
        inset: 0;
        border: 2px solid color-mix(in srgb, var(--primary) 68%, white 16%);
        border-radius: inherit;
        pointer-events: none;
        z-index: 3;
    }

    #results-page .image-card.selected .image-title {
        color: color-mix(in srgb, white 94%, var(--primary) 6%);
    }

    #results-page .image-card.selected .image-source-row,
    #results-page .image-card.selected .image-source {
        color: color-mix(in srgb, white 82%, var(--primary) 18%);
    }

    #results-page .image-card.selected .image-favicon {
        background: color-mix(in srgb, white 86%, var(--primary) 14%);
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 22%, transparent);
    }

    #results-page .image-card.selected:hover {
        opacity: 1 !important;
    }

    html[data-image-mode-desktop-layout="preview-left"]
        #results-page[data-lg-search-type="images"]
        #media-preview-panel,
    html[data-image-mode-desktop-layout="fab-right"]
        #results-page[data-lg-search-type="images"]
        #media-preview-panel {
        transform: translateX(-1rem) scale(0.975);
        transform-origin: left center;
    }
}

/* Desktop image FAB drawer */
@media (min-width: 768px) {
    #results-page[data-lg-search-type="images"].lg-image-fab-filters
        #results-tabs
        #tools-bar {
        display: none !important;
    }

    #results-page[data-lg-search-type="images"].lg-image-fab-filters
        .degoog-img-filter-toggle {
        display: none !important;
    }

    #results-page[data-lg-search-type="images"].lg-image-fab-filters
        #lg-image-tools-fab {
        position: fixed;
        inset-inline-start: 1rem;
        inset-inline-end: auto;
        bottom: 1rem;
        z-index: 10000;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--lg-fab-size);
        height: var(--lg-fab-size);
        min-width: var(--lg-fab-size);
        min-height: var(--lg-fab-size);
        padding: 0;
        border: 1px solid color-mix(in srgb, var(--border-light) 82%, transparent);
        border-radius: 50%;
        overflow: hidden;
        aspect-ratio: 1;
        background: var(--bg-light);
        color: var(--text-primary);
        cursor: pointer;
        box-shadow:
            0 12px 28px rgba(0, 0, 0, 0.22),
            inset 0 1px 0 color-mix(in srgb, var(--text-primary) 6%, transparent);
        opacity: 0;
        transform: translate3d(0, 0.65rem, 0) scale(0.9);
        pointer-events: none;
        transition:
            width var(--lg-drawer-morph-duration) var(--lg-drawer-ease-open),
            height var(--lg-drawer-morph-duration) var(--lg-drawer-ease-open),
            border-radius var(--lg-drawer-morph-duration) var(--lg-drawer-ease-open),
            transform 280ms var(--lg-drawer-ease-open),
            opacity 200ms ease;
    }

    #results-page[data-lg-search-type="images"].lg-image-fab-filters
        #lg-image-tools-fab.lg-image-tools-fab-entering {
        opacity: 0.92;
        transform: translate3d(0, 0.42rem, 0) scale(0.82);
        pointer-events: none;
    }

    #results-page[data-lg-search-type="images"].lg-image-fab-filters
        #lg-image-tools-fab.lg-image-tools-fab-ready {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        pointer-events: auto;
    }

    html[data-image-mode-desktop-layout="preview-left"]
        #results-page[data-lg-search-type="images"].lg-image-fab-filters
        #lg-image-tools-fab,
    html[data-image-mode-desktop-layout="fab-right"]
        #results-page[data-lg-search-type="images"].lg-image-fab-filters
        #lg-image-tools-fab {
        inset-inline-start: auto;
        inset-inline-end: 1rem;
    }

    #results-page[data-lg-search-type="images"].lg-image-fab-filters
        #lg-image-tools-fab:hover,
    #results-page[data-lg-search-type="images"].lg-image-fab-filters
        #lg-image-tools-fab:focus-visible {
        background: var(--bg-hover);
        box-shadow:
            0 14px 30px rgba(0, 0, 0, 0.26),
            inset 0 1px 0 color-mix(in srgb, var(--text-primary) 8%, transparent);
        transform: translateY(-1px) scale(1.02);
    }

    #results-page[data-lg-search-type="images"].lg-image-fab-filters
        #lg-image-tools-fab
        .lg-filters-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.25rem;
        height: 1.25rem;
        color: var(--text-primary);
        pointer-events: none;
    }

    #results-page[data-lg-search-type="images"].lg-image-fab-filters
        #lg-image-tools-fab
        .lg-filters-icon
        svg {
        width: 100%;
        height: 100%;
        display: block;
        pointer-events: none;
    }

    #results-page[data-lg-search-type="images"].lg-image-fab-filters
        #image-filters-bar {
        --lg-fab-inset-inline: 1rem;
        --lg-fab-inset-bottom: 1rem;
        transform: none !important;
    }

    #results-page[data-lg-search-type="images"].lg-image-fab-filters
        #image-filters-bar:not(.open):not(.lg-image-drawer-animating) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    #results-page[data-lg-search-type="images"].lg-image-fab-filters
        #image-filters-bar.lg-image-drawer-animating:not(.open) {
        background: var(--bg-light);
        border-color: color-mix(in srgb, var(--border-light) 82%, transparent);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    #results-page[data-lg-search-type="images"].lg-image-fab-filters
        #image-filters-bar.open {
        background: var(--bg-light);
        border-color: var(--border-light);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    html[data-image-mode-desktop-layout="preview-left"]
        #results-page[data-lg-search-type="images"].lg-image-fab-filters
        #image-filters-bar.open,
    html[data-image-mode-desktop-layout="preview-left"]
        #results-page[data-lg-search-type="images"].lg-image-fab-filters
        #image-filters-bar.lg-image-drawer-animating:not(.open),
    html[data-image-mode-desktop-layout="fab-right"]
        #results-page[data-lg-search-type="images"].lg-image-fab-filters
        #image-filters-bar.open,
    html[data-image-mode-desktop-layout="fab-right"]
        #results-page[data-lg-search-type="images"].lg-image-fab-filters
        #image-filters-bar.lg-image-drawer-animating:not(.open) {
        inset-inline-start: auto !important;
        inset-inline-end: var(--lg-fab-inset-inline) !important;
        transform-origin: calc(100% - 1.35rem) calc(100% - 1.35rem);
    }

    #results-page[data-lg-search-type="images"].lg-image-fab-filters:has(#image-filters-bar.open)
        #lg-image-tools-fab {
        opacity: 0;
        transform: translate3d(0, 0.35rem, 0) scale(0.88);
        pointer-events: none;
    }

    #results-page[data-lg-search-type="images"].lg-image-fab-filters
        #image-filters-bar
        .degoog-img-sidebar-head {
        justify-content: center;
        padding: 0.35rem 0.9rem;
    }

    body > #image-filters-bar.lg-image-fab-drawer
        .degoog-img-sidebar-close.lg-drawer-pull-tab,
    #results-page[data-lg-search-type="images"].lg-image-fab-filters
        #image-filters-bar
        .degoog-img-sidebar-close.lg-drawer-pull-tab {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1.875rem;
        height: 0.75rem;
        min-width: 1.875rem;
        min-height: 0.75rem;
        max-width: 1.875rem;
        max-height: 0.75rem;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent !important;
        background-image: none !important;
        color: transparent;
        box-shadow: none !important;
        appearance: none;
        -webkit-appearance: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    body > #image-filters-bar.lg-image-fab-drawer
        .degoog-img-sidebar-close.lg-drawer-pull-tab::before,
    #results-page[data-lg-search-type="images"].lg-image-fab-filters
        #image-filters-bar
        .degoog-img-sidebar-close.lg-drawer-pull-tab::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: var(--lg-drawer-handle-width);
        height: var(--lg-drawer-handle-height);
        border-radius: 100px;
        transform: translate(-50%, -50%);
        background: color-mix(in srgb, var(--text-secondary) 75%, transparent);
        box-shadow: 0 1px 0 color-mix(in srgb, var(--text-primary) 6%, transparent);
    }

    body > #image-filters-bar.lg-image-fab-drawer
        .degoog-img-sidebar-close.lg-drawer-pull-tab:hover,
    #results-page[data-lg-search-type="images"].lg-image-fab-filters
        #image-filters-bar
        .degoog-img-sidebar-close.lg-drawer-pull-tab:hover {
        background: transparent !important;
        box-shadow: none !important;
        color: transparent;
    }

    body > #image-filters-bar.lg-image-fab-drawer
        .degoog-img-sidebar-close.lg-drawer-pull-tab
        svg,
    #results-page[data-lg-search-type="images"].lg-image-fab-filters
        #image-filters-bar
        .degoog-img-sidebar-close.lg-drawer-pull-tab
        svg {
        display: none;
    }

    #results-page[data-lg-search-type="images"].lg-image-fab-filters
        #results-tabs
        .tools-wrap::before,
    #results-page[data-lg-search-type="images"].lg-image-fab-filters
        > .tools-panel.lg-filters-dropdown {
        display: none !important;
    }
}

/* Tablet / narrow desktop: keep one useful-width rail and match mobile by
   placing sidebar panels before results. */
@media (min-width: 768px) and (max-width: 1023px) {
    #results-page:not(:has(#results-layout.media-mode)):not(.lg-command-mode)
        #results-layout {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: none;
        min-width: 0;
        margin-inline: 0;
        padding-block: 0;
        padding-inline-start: var(
            --literallygoogle-results-content-inline-start
        );
        padding-inline-end: var(--literallygoogle-results-content-inline-end);
        gap: 1rem;
    }

    #results-page:not(:has(#results-layout.media-mode)):not(.lg-command-mode)
        #results-main,
    #results-page:not(:has(#results-layout.media-mode)):not(.lg-command-mode)
        #sidebar-col,
    #results-page:not(:has(#results-layout.media-mode)):not(.lg-command-mode)
        #sidebar-col.is-sticky
        > .sticky {
        width: 100%;
        max-width: none;
        min-width: 0;
    }

    #results-page:not(:has(#results-layout.media-mode)):not(.lg-command-mode)
        #sidebar-col {
        order: -1;
        position: static;
        top: auto;
        align-self: stretch;
        max-height: none;
        overflow: visible;
    }
}

/* Mobile results */
@media (max-width: 767px) {
    #results-meta {
        padding-inline: 0.75rem;
    }

    /* Never show the legacy scale(0.18) miniature sidebar on image search. */
    #results-page:is(
            [data-lg-search-type="images"],
            :has(#results-tabs .results-tab[data-type="images"].active),
            :has(
                #results-tabs
                    .results-tab[data-type="images"][aria-selected="true"]
            ),
            :has(#results-list .image-card)
        )
        #image-filters-bar {
        transform: none !important;
    }

    #results-page:is(
            [data-lg-search-type="images"],
            :has(#results-tabs .results-tab[data-type="images"].active),
            :has(
                #results-tabs
                    .results-tab[data-type="images"][aria-selected="true"]
            ),
            :has(#results-list .image-card)
        )
        #image-filters-bar:not(.open):not(.lg-image-drawer-animating) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    #results-layout {
        padding-block: 0;
        padding-inline: 0.75rem;
    }

    /* Mobile web: core puts sidebar first (order: -1). Normalize gaps only. */
    #results-page:not(:has(#results-layout.media-mode)):not(.lg-command-mode) {
        --lg-stack-gap: 1rem;
    }

    #results-page:not(:has(#results-layout.media-mode)):not(.lg-command-mode)
        #results-layout {
        gap: var(--lg-stack-gap);
    }

    #results-page:not(:has(#results-layout.media-mode)):not(.lg-command-mode)
        #sidebar-col {
        padding-bottom: 0;
    }

    #results-page:not(:has(#results-layout.media-mode)):not(.lg-command-mode)
        #results-sidebar {
        display: flex;
        flex-direction: column;
        gap: var(--lg-stack-gap);
    }

    #results-page:not(:has(#results-layout.media-mode)):not(.lg-command-mode)
        #results-sidebar
        > :is(.degoog-panel--stack-item, .sidebar-panel) {
        margin-bottom: 0 !important;
    }

    #results-page:not(:has(#results-layout.media-mode)):not(.lg-command-mode)
        #results-main {
        flex: 0 0 auto;
    }

    /* Keep spacing between the above-results slot and results-main consistent
       with the spacing inside results-main (e.g. at-a-glance → results-list). */
    #slot-above-results:not(:empty) {
        margin-bottom: 1rem;
    }

    /* Stack above-results plugins vertically; desktop uses display:contents in the
       grid block so panels join #results-layout (full-width row, then main+sidebar). */
    #slot-above-results {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    #results-page:is(.lg-image-fab-filters, [data-lg-search-type="images"], [data-lg-search-type="videos"], :has(#results-tabs .results-tab[data-type="images"].active), :has(#results-tabs .results-tab[data-type="images"][aria-selected="true"]), :has(#results-tabs .results-tab[data-type="videos"].active), :has(#results-tabs .results-tab[data-type="videos"][aria-selected="true"])) #results-tabs #tools-bar {
        display: none !important;
    }

    #results-page:is(.lg-image-fab-filters, [data-lg-search-type="images"], [data-lg-search-type="videos"], :has(#results-tabs .results-tab[data-type="images"].active), :has(#results-tabs .results-tab[data-type="images"][aria-selected="true"]), :has(#results-tabs .results-tab[data-type="videos"].active), :has(#results-tabs .results-tab[data-type="videos"][aria-selected="true"])) .degoog-img-filter-toggle {
        display: none !important;
    }

    #results-page.lg-image-fab-filters #results-tabs {
        gap: 0.5rem;
        padding-inline: 0.75rem;
    }

    #results-page.lg-image-fab-filters #results-meta {
        --lg-media-meta-left-gap: var(--theme-media-inline-gutter);
        --lg-media-meta-right-gap-fallback: 2rem;
    }

    #results-page.lg-image-fab-filters #lg-image-tools-fab {
        position: fixed;
        inset-inline-start: 1rem;
        inset-inline-end: auto;
        bottom: var(--lg-fab-inset-bottom, calc(env(safe-area-inset-bottom, 0px) + 1rem));
        z-index: 214;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--lg-fab-size);
        height: var(--lg-fab-size);
        min-width: var(--lg-fab-size);
        min-height: var(--lg-fab-size);
        padding: 0;
        border: 1px solid color-mix(in srgb, var(--border-light) 82%, transparent);
        border-radius: 50%;
        overflow: hidden;
        aspect-ratio: 1;
        background: var(--bg-light);
        color: var(--text-primary);
        cursor: pointer;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        box-shadow:
            0 12px 28px rgba(0, 0, 0, 0.22),
            inset 0 1px 0 color-mix(in srgb, var(--text-primary) 6%, transparent);
        opacity: 0;
        transform: translate3d(0, 0.65rem, 0) scale(0.9);
        pointer-events: none;
        transition:
            bottom var(--lg-drawer-duration) var(--lg-drawer-ease-open),
            width var(--lg-drawer-morph-duration) var(--lg-drawer-ease-open),
            height var(--lg-drawer-morph-duration) var(--lg-drawer-ease-open),
            border-radius var(--lg-drawer-morph-duration) var(--lg-drawer-ease-open),
            transform 280ms var(--lg-drawer-ease-open),
            opacity 200ms ease;
    }

    #results-page.lg-image-fab-filters #lg-image-tools-fab.lg-image-tools-fab-entering {
        width: var(--lg-fab-size);
        min-width: var(--lg-fab-size);
        height: var(--lg-fab-size);
        min-height: var(--lg-fab-size);
        border-radius: 50%;
        opacity: 0.92;
        transform: translate3d(0, 0.42rem, 0) scale(0.82);
        pointer-events: none;
    }

    #results-page.lg-image-fab-filters #lg-image-tools-fab.lg-image-tools-fab-ready {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        pointer-events: auto;
    }

    html[dir="rtl"] #results-page.lg-image-fab-filters #lg-image-tools-fab {
        inset-inline-start: auto;
        inset-inline-end: 1rem;
    }

    #results-page.lg-image-fab-filters.lg-image-drawer-anchor-end #lg-image-tools-fab {
        inset-inline-start: auto;
        inset-inline-end: 1rem;
    }

    html[dir="rtl"] #results-page.lg-image-fab-filters.lg-image-drawer-anchor-end #lg-image-tools-fab {
        inset-inline-start: 1rem;
        inset-inline-end: auto;
    }

    #results-page.lg-image-fab-filters #lg-image-tools-fab:hover,
    #results-page.lg-image-fab-filters #lg-image-tools-fab:focus-visible {
        background: var(--bg-hover);
        box-shadow:
            0 14px 30px rgba(0, 0, 0, 0.26),
            inset 0 1px 0 color-mix(in srgb, var(--text-primary) 8%, transparent);
        transform: translateY(-1px) scale(1.02);
    }

    #results-page.lg-image-fab-filters #lg-image-tools-fab .lg-filters-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.25rem;
        height: 1.25rem;
        color: var(--text-primary);
        pointer-events: none;
    }

    #results-page.lg-image-fab-filters #lg-image-tools-fab .lg-filters-icon svg {
        width: 100%;
        height: 100%;
        display: block;
        pointer-events: none;
    }

    #results-page.lg-image-fab-filters #image-filters-bar {
        --lg-fab-inset-inline: 1rem;
        --lg-fab-inset-bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
        transform: none !important;
        transition:
            width var(--lg-drawer-duration) var(--lg-drawer-ease-open),
            height var(--lg-drawer-duration) var(--lg-drawer-ease-open),
            max-width var(--lg-drawer-duration) var(--lg-drawer-ease-open),
            max-height var(--lg-drawer-duration) var(--lg-drawer-ease-open),
            border-radius var(--lg-drawer-duration) var(--lg-drawer-ease-open),
            inset-inline-start var(--lg-drawer-duration) var(--lg-drawer-ease-open),
            inset-inline-end var(--lg-drawer-duration) var(--lg-drawer-ease-open),
            bottom var(--lg-drawer-duration) var(--lg-drawer-ease-open),
            background var(--lg-drawer-duration) var(--lg-drawer-ease-open),
            border-color var(--lg-drawer-duration) var(--lg-drawer-ease-open),
            backdrop-filter var(--lg-drawer-duration) var(--lg-drawer-ease-open),
            -webkit-backdrop-filter var(--lg-drawer-duration) var(--lg-drawer-ease-open),
            box-shadow var(--lg-drawer-duration) var(--lg-drawer-ease-open),
            opacity 180ms ease,
            visibility 0s linear var(--lg-drawer-duration);
    }

    #results-page.lg-image-fab-filters #image-filters-bar.lg-image-drawer-animating {
        will-change:
            width,
            height,
            max-width,
            max-height,
            border-radius,
            inset-inline-start,
            inset-inline-end,
            bottom,
            background,
            border-color,
            backdrop-filter,
            box-shadow,
            opacity;
    }

    /* Idle closed: only #lg-image-tools-fab is visible — never a shrunken sidebar. */
    #results-page.lg-image-fab-filters #image-filters-bar:not(.open):not(
            .lg-image-drawer-animating
        ) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    #results-page.lg-image-fab-filters #image-filters-bar:not(.open) .degoog-img-sidebar {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    #results-page.lg-image-fab-filters #image-filters-bar.lg-image-drawer-animating:not(.open) {
        display: block !important;
        width: var(--lg-fab-size) !important;
        height: var(--lg-fab-size) !important;
        min-height: var(--lg-fab-size) !important;
        max-height: var(--lg-fab-size) !important;
        max-width: var(--lg-fab-size) !important;
        border-radius: calc(var(--lg-fab-size) / 2) !important;
        inset-inline-start: var(--lg-fab-inset-inline) !important;
        inset-inline-end: auto !important;
        bottom: var(--lg-fab-inset-bottom) !important;
        background: var(--bg-light);
        border: 1px solid color-mix(in srgb, var(--border-light) 82%, transparent);
        box-shadow:
            0 12px 28px rgba(0, 0, 0, 0.22),
            inset 0 1px 0 color-mix(in srgb, var(--text-primary) 6%, transparent);
        backdrop-filter: blur(0px) saturate(100%);
        -webkit-backdrop-filter: blur(0px) saturate(100%);
        visibility: visible;
        opacity: 1;
        pointer-events: none;
        overflow: hidden;
        z-index: 213;
        transition:
            width var(--lg-drawer-duration) var(--lg-drawer-ease-close),
            height var(--lg-drawer-duration) var(--lg-drawer-ease-close),
            max-width var(--lg-drawer-duration) var(--lg-drawer-ease-close),
            max-height var(--lg-drawer-duration) var(--lg-drawer-ease-close),
            border-radius var(--lg-drawer-duration) var(--lg-drawer-ease-close),
            inset-inline-start var(--lg-drawer-duration) var(--lg-drawer-ease-close),
            inset-inline-end var(--lg-drawer-duration) var(--lg-drawer-ease-close),
            bottom var(--lg-drawer-duration) var(--lg-drawer-ease-close),
            background var(--lg-drawer-duration) var(--lg-drawer-ease-close),
            border-color var(--lg-drawer-duration) var(--lg-drawer-ease-close),
            backdrop-filter var(--lg-drawer-duration) var(--lg-drawer-ease-close),
            -webkit-backdrop-filter var(--lg-drawer-duration) var(--lg-drawer-ease-close),
            box-shadow var(--lg-drawer-duration) var(--lg-drawer-ease-close),
            opacity 180ms ease,
            visibility 0s;
    }

    #results-page.lg-image-fab-filters #image-filters-bar.lg-image-drawer-anchor-end.lg-image-drawer-animating:not(.open) {
        inset-inline-start: auto !important;
        inset-inline-end: var(--lg-fab-inset-inline) !important;
    }

    #results-page.lg-image-fab-filters #image-filters-bar.open {
        display: block !important;
        width: var(--lg-drawer-width-mobile) !important;
        max-width: var(--lg-drawer-width-mobile) !important;
        height: min(
            44rem,
            var(--lg-drawer-max-height, calc(100dvh - 1.5rem - env(safe-area-inset-bottom, 0px)))
        ) !important;
        max-height: var(
            --lg-drawer-max-height,
            calc(100dvh - 1.5rem - env(safe-area-inset-bottom, 0px))
        ) !important;
        min-height: 0;
        border-radius: clamp(1.5rem, 5vw, 2rem);
        inset-inline-start: 0.75rem !important;
        inset-inline-end: auto !important;
        bottom: var(
            --lg-fab-inset-bottom,
            calc(env(safe-area-inset-bottom, 0px) + 0.75rem)
        ) !important;
        z-index: 100000;
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transform: none !important;
        overflow: hidden;
        transition:
            width var(--lg-drawer-duration) var(--lg-drawer-ease-open),
            height var(--lg-drawer-duration) var(--lg-drawer-ease-open),
            max-width var(--lg-drawer-duration) var(--lg-drawer-ease-open),
            max-height var(--lg-drawer-duration) var(--lg-drawer-ease-open),
            border-radius var(--lg-drawer-duration) var(--lg-drawer-ease-open),
            inset-inline-start var(--lg-drawer-duration) var(--lg-drawer-ease-open),
            inset-inline-end var(--lg-drawer-duration) var(--lg-drawer-ease-open),
            bottom var(--lg-drawer-duration) var(--lg-drawer-ease-open),
            background var(--lg-drawer-duration) var(--lg-drawer-ease-open),
            border-color var(--lg-drawer-duration) var(--lg-drawer-ease-open),
            backdrop-filter var(--lg-drawer-duration) var(--lg-drawer-ease-open),
            -webkit-backdrop-filter var(--lg-drawer-duration) var(--lg-drawer-ease-open),
            box-shadow var(--lg-drawer-duration) var(--lg-drawer-ease-open),
            opacity 220ms ease,
            visibility 0s;
    }

    #results-page.lg-image-fab-filters #image-filters-bar.open.lg-image-drawer-anchor-end {
        inset-inline-start: auto !important;
        inset-inline-end: 0.75rem !important;
    }

    #results-page.lg-image-fab-filters #image-filters-bar.open.lg-image-drawer-animating:not(.lg-image-drawer-open-ready) {
        width: var(--lg-fab-size) !important;
        height: var(--lg-fab-size) !important;
        min-height: var(--lg-fab-size) !important;
        max-height: var(--lg-fab-size) !important;
        max-width: var(--lg-fab-size) !important;
        border-radius: calc(var(--lg-fab-size) / 2) !important;
        overflow: hidden;
        box-shadow:
            0 12px 28px rgba(0, 0, 0, 0.22),
            inset 0 1px 0 color-mix(in srgb, var(--text-primary) 6%, transparent);
        transition:
            width var(--lg-drawer-duration) var(--lg-drawer-ease-open),
            height var(--lg-drawer-duration) var(--lg-drawer-ease-open),
            max-width var(--lg-drawer-duration) var(--lg-drawer-ease-open),
            max-height var(--lg-drawer-duration) var(--lg-drawer-ease-open),
            border-radius var(--lg-drawer-duration) var(--lg-drawer-ease-open),
            inset-inline-start var(--lg-drawer-duration) var(--lg-drawer-ease-open),
            inset-inline-end var(--lg-drawer-duration) var(--lg-drawer-ease-open),
            bottom var(--lg-drawer-duration) var(--lg-drawer-ease-open),
            background var(--lg-drawer-duration) var(--lg-drawer-ease-open),
            border-color var(--lg-drawer-duration) var(--lg-drawer-ease-open),
            backdrop-filter var(--lg-drawer-duration) var(--lg-drawer-ease-open),
            -webkit-backdrop-filter var(--lg-drawer-duration) var(--lg-drawer-ease-open),
            box-shadow var(--lg-drawer-duration) var(--lg-drawer-ease-open),
            opacity 180ms ease,
            visibility 0s;
    }

    #results-page.lg-image-fab-filters #image-filters-bar.open.lg-image-drawer-animating:not(.lg-image-drawer-open-ready)
        .degoog-img-sidebar-body,
    #results-page.lg-image-fab-filters #image-filters-bar.open.lg-image-drawer-animating:not(.lg-image-drawer-open-ready)
        .degoog-img-sidebar-head {
        opacity: 0 !important;
        pointer-events: none !important;
    }

    #results-page.lg-image-fab-filters #image-filters-bar.open.lg-drawer-dragging {
        transition: none !important;
    }

    #results-page.lg-image-fab-filters #image-filters-bar.open.lg-drawer-drag-snap {
        transition:
            width var(--lg-drawer-morph-duration) var(--lg-drawer-ease-open),
            height var(--lg-drawer-morph-duration) var(--lg-drawer-ease-open),
            max-width var(--lg-drawer-morph-duration) var(--lg-drawer-ease-open),
            max-height var(--lg-drawer-morph-duration) var(--lg-drawer-ease-open),
            border-radius var(--lg-drawer-morph-duration) var(--lg-drawer-ease-open),
            inset-inline-start var(--lg-drawer-morph-duration) var(--lg-drawer-ease-open),
            inset-inline-end var(--lg-drawer-morph-duration) var(--lg-drawer-ease-open),
            bottom var(--lg-drawer-morph-duration) var(--lg-drawer-ease-open),
            opacity 180ms ease !important;
    }

    #results-page.lg-image-fab-filters #image-filters-bar .degoog-img-sidebar-head {
        justify-content: center;
        padding: 0.55rem 0.9rem 0.25rem;
        touch-action: none;
    }

    #results-page.lg-image-fab-filters #image-filters-bar .degoog-img-sidebar-close.lg-drawer-pull-tab {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 3.25rem;
        height: 1.5rem;
        min-width: 3.25rem;
        min-height: 1.5rem;
        max-width: 3.25rem;
        max-height: 1.5rem;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent !important;
        background-image: none !important;
        color: transparent;
        box-shadow: none !important;
        appearance: none;
        -webkit-appearance: none;
        cursor: grab;
        touch-action: none;
        -webkit-tap-highlight-color: transparent;
    }

    #results-page.lg-image-fab-filters
        #image-filters-bar
        .degoog-img-sidebar-close.lg-drawer-pull-tab::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: var(--lg-drawer-handle-width);
        height: var(--lg-drawer-handle-height);
        border-radius: 100px;
        transform: translate(-50%, -50%);
        background: color-mix(in srgb, var(--text-secondary) 75%, transparent);
        box-shadow: 0 1px 0 color-mix(in srgb, var(--text-primary) 6%, transparent);
    }

    #results-page.lg-image-fab-filters
        #image-filters-bar
        .degoog-img-sidebar-close.lg-drawer-pull-tab:active {
        cursor: grabbing;
    }

    #results-page.lg-image-fab-filters
        #image-filters-bar
        .degoog-img-sidebar-close.lg-drawer-pull-tab:hover::before {
        background: color-mix(in srgb, var(--text-secondary) 68%, transparent);
    }

    #results-page.lg-image-fab-filters
        #image-filters-bar
        .degoog-img-sidebar-close.lg-drawer-pull-tab:hover {
        background: transparent !important;
        box-shadow: none !important;
        color: transparent;
    }

    #results-page.lg-image-fab-filters
        #image-filters-bar
        .degoog-img-sidebar-close.lg-drawer-pull-tab
        svg {
        display: none;
    }

    html[dir="rtl"] #results-page.lg-image-fab-filters #image-filters-bar:not(.open) {
        inset-inline-start: auto !important;
        inset-inline-end: var(--lg-fab-inset-inline) !important;
    }

    html[dir="rtl"] #results-page.lg-image-fab-filters #image-filters-bar.open {
        inset-inline-start: auto !important;
        inset-inline-end: 0.75rem !important;
    }

    #results-page.lg-image-fab-filters:has(#image-filters-bar.open) #lg-image-tools-fab {
        opacity: 0;
        transform: translate3d(0, 0.35rem, 0) scale(0.88);
        pointer-events: none;
    }

    #results-page.lg-image-fab-filters #image-filters-bar .degoog-img-sidebar-body,
    #results-page.lg-image-fab-filters #image-filters-bar .degoog-img-sidebar-head {
        opacity: var(--lg-drawer-content-opacity, 0);
        transform: none;
        pointer-events: none;
        transition: opacity 160ms ease;
    }

    #results-page.lg-image-fab-filters
        #image-filters-bar.lg-image-drawer-animating:not(.open)
        .degoog-img-sidebar-body {
        overflow: hidden !important;
        scrollbar-width: none;
    }

    #results-page.lg-image-fab-filters
        #image-filters-bar.lg-image-drawer-animating:not(.open)
        .degoog-img-sidebar-body::-webkit-scrollbar {
        display: none;
    }

    #results-page.lg-image-fab-filters #image-filters-bar.open .degoog-img-sidebar-body,
    #results-page.lg-image-fab-filters #image-filters-bar.open .degoog-img-sidebar-head {
        opacity: var(--lg-drawer-content-opacity, 1);
        transform: none;
        pointer-events: auto;
        transition: opacity 200ms ease;
        transition-delay: 0ms;
    }

    #results-page.lg-image-fab-filters
        #image-filters-bar.open.lg-image-drawer-open-ready
        .degoog-img-sidebar-body,
    #results-page.lg-image-fab-filters
        #image-filters-bar.open.lg-image-drawer-open-ready
        .degoog-img-sidebar-head {
        transition-delay: 90ms;
    }

    #results-page.lg-image-fab-filters #image-filters-bar.open .degoog-img-sidebar-head {
        transition-delay: 0ms;
    }

    #results-page.lg-image-fab-filters #image-filters-bar .degoog-img-sidebar-body {
        gap: 2px;
        padding: 0 0.8rem 0.55rem;
    }

    #results-page.lg-image-fab-filters #image-filters-bar .degoog-img-filter-group {
        display: flex;
        flex-direction: column;
        gap: 2px;
        width: 100%;
        min-width: 100%;
        flex: 0 0 auto;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        overflow: visible;
    }

    #results-page.lg-image-fab-filters #image-filters-bar .sidebar-accordion {
        width: 100%;
        min-width: 100%;
        flex: 0 0 auto;
    }

    #results-page.lg-image-fab-filters #image-filters-bar .degoog-img-filter-group > .degoog-accordion-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 3.2rem;
        padding: 0.85rem 1rem;
        background: var(--lg-sidebar-row-surface) !important;
        border: 0;
        border-start-start-radius: var(--theme-radius-lg);
        border-start-end-radius: var(--theme-radius-lg);
        border-end-start-radius: var(--theme-radius-lg);
        border-end-end-radius: var(--theme-radius-lg);
        color: var(--text-primary);
        box-sizing: border-box;
        cursor: pointer;
    }

    #results-page.lg-image-fab-filters
        #image-filters-bar
        .degoog-img-filter-group.open
        > .degoog-accordion-toggle {
        border-end-start-radius: var(--theme-radius-xs);
        border-end-end-radius: var(--theme-radius-xs);
    }

    #results-page.lg-image-fab-filters #image-filters-bar .degoog-accordion-toggle .accordion-chevron,
    #results-page.lg-image-fab-filters #image-filters-bar .degoog-accordion-toggle .degoog-img-filter-head {
        pointer-events: none;
    }

    #results-page.lg-image-fab-filters
        #image-filters-bar
        .sidebar-accordion-toggle.degoog-accordion-toggle--sidebar {
        min-height: 3.2rem;
        width: 100%;
        box-sizing: border-box;
    }

    #results-page.lg-image-fab-filters #results-tabs .tools-wrap::before,
    #results-page.lg-image-fab-filters > .tools-panel.lg-filters-dropdown {
        display: none !important;
    }

    #results-main {
        max-width: none !important;
    }
    #results-list {
        max-width: var(--literallygoogle-results-main-col-max, 48rem);
        width: 100%;
    }
    #at-a-glance {
        width: 100% !important;
        max-width: none !important;
    }
    #at-a-glance .glance-box,
    #at-a-glance .skeleton-glance,
    #at-a-glance .glance-ai-skeleton,
    #at-a-glance .degoog-panel {
        max-width: none !important;
        width: 100% !important;
    }
}

#slot-above-results:empty {
    display: none;
}

/* Native degoog owns slot rendering and lifecycle; LiterallyGoogle owns the
   page rail. Match the old full-width grid span exactly: the same logical
   start gutter as results, then main + column gap + sidebar. Core's generic
   clamp is tuned for the default theme and otherwise leaves native cards
   misaligned with this theme's results and sidebar columns. */
#slot-full-width-above-results {
    --theme-slot-stack-gap: 1rem;
    --theme-native-slot-inline-size: calc(
        var(--literallygoogle-results-main-col-max)
        + var(--literallygoogle-results-column-gap)
        + var(--literallygoogle-results-sidebar-col)
    );
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--theme-slot-stack-gap);
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin: 0.5rem 0 1rem;
    padding-block: 0;
    padding-inline-start: var(
        --literallygoogle-results-content-inline-start
    );
    padding-inline-end: var(--literallygoogle-results-content-inline-end);
}

#slot-full-width-above-results > .results-slot-panel-full-width {
    width: min(100%, var(--theme-native-slot-inline-size));
    max-width: var(--theme-native-slot-inline-size);
    min-width: 0;
}

@media (min-width: 768px) {
    /* Beat core's higher-specificity centered-mode fallback too; the theme's
       results grid remains the source of truth for both display modes. */
    #results-page.centered-mode #slot-full-width-above-results {
        max-width: none;
        margin-inline: 0;
        padding-inline-start: var(
            --literallygoogle-results-content-inline-start
        );
        padding-inline-end: var(
            --literallygoogle-results-content-inline-end
        );
    }
}

@media (max-width: 767px) {
    #slot-full-width-above-results {
        margin-block: 0 1rem;
        padding-inline: 0.75rem;
    }

    #slot-full-width-above-results > .results-slot-panel-full-width {
        width: 100%;
        max-width: none;
    }
}

#slot-full-width-above-results:empty {
    display: none;
}

/* Each stacked full-width above-results plugin gets its own visible panel frame
   (e.g. Places + Stocks on the same query). Plugins that supply their own outer
   card flatten the degoog shell in plugin CSS (color-translator, until). */
#slot-above-results > .results-slot-panel,
#slot-above-results
    > .results-slot-panel
    > .results-slot-panel-body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Spell check: appended dynamically to #results-meta to sit side-by-side */
#results-meta {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 1rem;
    row-gap: 0.5rem;
    max-width: none;
}

@media (min-width: 768px) {
    #results-meta {
        width: min(100%, var(--literallygoogle-results-layout-max));
        flex-wrap: nowrap;
        max-width: none;
    }
}

/* Primary results rail: tabs and Filter stay with the result content at every
   width. The sidebar column is reserved for sidebar content. */
@media (min-width: 768px) {
    #results-page:not(:has(#results-layout.media-mode)):not(.lg-command-mode)
        #results-tabs {
        display: grid;
        grid-template-columns: minmax(
            0,
            var(--literallygoogle-results-rail-inline-size)
        );
        column-gap: 0;
        align-items: center;
        padding-inline-start: var(
            --literallygoogle-results-content-inline-start
        );
        padding-inline-end: 0;
    }

    #results-page:not(:has(#results-layout.media-mode)):not(.lg-command-mode)
        #results-tabs
        > .lg-results-tabs-rail {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
    }

    #results-page:not(:has(#results-layout.media-mode)):not(.lg-command-mode)
        #results-tabs:has(> #tools-bar:not([hidden]))
        > .lg-results-tabs-rail {
        margin-inline-end: 6.5rem;
    }

    /* If tools-bar is hidden on command pages or image FAB page, remove the margin */
    #results-page:is(
        :has(#results-list .command-result),
        :has(#results-list .command-help-table),
        [data-lg-search-type="images"].lg-image-fab-filters
    )
        #results-tabs
        > .lg-results-tabs-rail {
        margin-inline-end: 0;
    }

    #results-page:not(:has(#results-layout.media-mode)):not(.lg-command-mode)
        #results-tabs
        > #tools-bar {
        grid-column: 1;
        grid-row: 1;
        justify-self: end;
        z-index: 10;
    }
}

@media (min-width: 1024px) {
    #results-page:not(:has(#results-layout.media-mode)):not(.lg-command-mode)
        #results-tabs {
        grid-template-columns: var(
            --lg-results-meta-grid-columns,
            minmax(0, var(--literallygoogle-results-rail-inline-size))
                var(--literallygoogle-results-sidebar-max)
        );
        column-gap: var(--literallygoogle-results-column-gap);
    }

    #results-page:not(:has(#results-layout.media-mode)):not(.lg-command-mode)
        #results-tabs:has(> #tools-bar:not([hidden]))
        > .lg-results-tabs-rail {
        margin-inline-end: 0;
    }

    #results-page:not(:has(#results-layout.media-mode)):not(.lg-command-mode)
        #results-tabs
        > #tools-bar {
        grid-column: 2;
    }

}

/* Status, spell-check, and engine chrome share the primary result rail. A flex
   row keeps simultaneous left- and right-aligned items from overlapping. */
@media (min-width: 768px) {
    #results-page:not(:has(#results-layout.media-mode)):not(.lg-command-mode)
        #results-meta {
        display: flex;
        width: min(
            100%,
            calc(
                var(--literallygoogle-results-content-inline-start) +
                    var(--literallygoogle-results-rail-inline-size)
            )
        );
        max-width: none;
        padding-inline-end: 0;
        justify-content: flex-start;
        column-gap: 1rem;
        align-items: center;
        flex-wrap: nowrap;
        box-sizing: border-box;
    }

    #results-page:not(:has(#results-layout.media-mode)):not(.lg-command-mode)
        #results-meta
        :is(.spell-check-notice, #lg-media-engine-pills) {
        min-width: 0;
        margin-inline-start: 0;
        margin-inline-end: 0;
    }

    #results-page:not(:has(#results-layout.media-mode)):not(.lg-command-mode)
        #results-meta
        .results-meta-stats {
        min-width: 0;
        margin-inline-start: auto;
        margin-inline-end: 0;
        text-align: end;
    }
}

/* Tablet uses the full usable result-card width. Resolve each percentage in
   its own container so the vertical scrollbar is never counted as content. */
@media (min-width: 768px) and (max-width: 1023px) {
    #results-page:not(:has(#results-layout.media-mode)):not(.lg-command-mode)
        #results-tabs {
        grid-template-columns: minmax(
            0,
            calc(100% - var(--literallygoogle-results-content-inline-end))
        );
    }

    #results-page:not(:has(#results-layout.media-mode)):not(.lg-command-mode)
        #results-meta {
        width: calc(
            100% - var(--literallygoogle-results-content-inline-end)
        );
    }
}

/* On the two-column Web layout, result status belongs to the sidebar rail.
   Use the runtime fluid columns so its right edge matches the visible sidebar
   panel rather than the scrollbar track or the main-results column. */
@media (min-width: 1024px) {
    #results-page:not(:has(#results-layout.media-mode)):not(.lg-command-mode)
        #results-meta {
        display: grid;
        grid-template-columns: var(
            --lg-results-meta-grid-columns,
            minmax(0, var(--literallygoogle-results-main-col-max))
                var(--literallygoogle-results-sidebar-max)
        );
        column-gap: var(--literallygoogle-results-column-gap);
        width: min(
            100%,
            calc(
                var(--literallygoogle-results-content-inline-start) +
                    var(--literallygoogle-results-main-col-max) +
                    var(--literallygoogle-results-column-gap) +
                    var(--literallygoogle-results-sidebar-max)
            )
        );
        padding-inline-start: var(
            --literallygoogle-results-content-inline-start
        );
    }

    #results-page:not(:has(#results-layout.media-mode)):not(.lg-command-mode)
        #results-meta
        :is(.spell-check-notice, #lg-media-engine-pills) {
        grid-column: 1;
    }

    #results-page:not(:has(#results-layout.media-mode)):not(.lg-command-mode)
        #results-meta
        .results-meta-stats {
        grid-column: 2;
        justify-self: end;
        margin-inline: 0;
    }
}

/* Google-style Filters dropdown in the tab row */
:is(#results-page, #image-filters-bar, body) {
    --lg-scrollbar-gutter: 0.625rem;
    --lg-selection-accent: #9ac1fd;
    --lg-selection-active-bg: color-mix(in srgb, var(--lg-selection-accent) 16%, var(--bg-light));
    --lg-selection-active-ring: color-mix(in srgb, var(--lg-selection-accent) 65%, transparent);
    --lg-filters-active-bg: var(--lg-selection-active-bg);
    --lg-filters-active-fg: var(--text-primary);
    --lg-engine-active-bg: var(--lg-selection-active-bg);
    --lg-engine-active-fg: var(--text-primary);
    --lg-row-hover-bg: color-mix(in srgb, #fff 14%, var(--bg-light));
    --lg-row-hover-shadow: none;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) :is(#results-page, #image-filters-bar, body) {
        --lg-selection-accent: #669df6;
        --lg-selection-active-bg: #d4e2fc;
        --lg-selection-active-ring: color-mix(in srgb, #669df6 42%, #d4e2fc);
        --lg-row-hover-bg: var(--bg-hover);
        --lg-row-hover-shadow:
            inset 0 1px 0 color-mix(in srgb, var(--text-primary) 4%, transparent),
            0 1px 2px color-mix(in srgb, var(--text-primary) 8%, transparent);
    }
}

[data-theme="light"] :is(#results-page, #image-filters-bar, body) {
    --lg-selection-accent: #669df6;
    --lg-selection-active-bg: #d4e2fc;
    --lg-selection-active-ring: color-mix(in srgb, #669df6 42%, #d4e2fc);
    --lg-row-hover-bg: var(--bg-hover);
    --lg-row-hover-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--text-primary) 4%, transparent),
        0 1px 2px color-mix(in srgb, var(--text-primary) 8%, transparent);
}

#results-tabs .lg-filters-wrap {
    position: sticky;
    inset-inline-end: 0;
    z-index: 2;
    background: var(--bg);
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    max-width: max-content;
    padding-inline-start: 0.35rem;
}

/* Docked filter (desktop tabs rail): hide core tab|filter divider. */
@media (min-width: 768px) {
    #results-page #results-tabs:has(.lg-results-tabs-rail) .tools-wrap::before {
        display: none;
    }
}

#results-tabs .tools-toggle .lg-filters-icon {
    display: none;
}

#results-tabs .tools-toggle .lg-filters-label {
    display: inline;
}

@media (min-width: 768px) {
    #results-tabs .tools-toggle > .lg-filters-label {
        display: inline !important;
    }

    #results-tabs .tools-toggle {
        padding-inline-end: 0;
    }
}

#results-page #results-tabs {
    position: relative;
    z-index: 110;
}

/* Tabs scroll rail (mounted at all widths by syncTabsRail). The rail groups
   the tab buttons so the grid (>=768px) can place it in column 1; on mobile
   it also owns the horizontal scroll + edge-aware arrows, and the Filters
   control is appended as the last scroll item (see scripts/search.js). */
#results-page #results-tabs:has(.lg-results-tabs-rail) {
    overflow: visible;
}

#results-page #results-tabs .lg-results-tabs-rail {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
}

#results-page #results-tabs .lg-results-tabs__scroll {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    gap: 0.25rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-inline-end: 1rem;
}

#results-page #results-tabs .lg-results-tabs__scroll::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

#results-page #results-tabs .lg-results-tabs-rail .lg-media-engine-nav--prev {
    inset-inline-start: 0;
}

#results-page #results-tabs .lg-results-tabs-rail .lg-media-engine-nav--next {
    inset-inline-end: 0;
}

/* Edge-aware arrows are a mobile-only affordance (skinny screens where the
   tab list overflows). On desktop there is room and the rail is a passive
   grid grouping — hide the nav buttons entirely. */
@media (min-width: 768px) {
    #results-page #results-tabs .lg-results-tabs-rail .lg-media-engine-nav {
        display: none;
    }
}

@media (max-width: 767px) {
    #results-page #results-tabs .lg-results-tabs-rail:hover .lg-media-engine-nav:not(:disabled),
    #results-page #results-tabs .lg-results-tabs-rail:focus-within .lg-media-engine-nav:not(:disabled) {
        opacity: 1;
        pointer-events: auto;
    }

    #results-tabs .lg-filters-wrap {
        position: relative;
        background: none;
        box-shadow: none;
    }
}

/* Author `.tools-wrap { display: flex }` beats UA `[hidden]`; restore hidden semantics. */
#results-page #results-tabs #tools-bar[hidden] {
    display: none !important;
}

#results-page.lg-command-mode #tools-bar {
    display: none !important;
}

#results-page:has(#results-list .command-result) #tools-bar,
#results-page:has(#results-list .command-help-table) #tools-bar {
    display: none !important;
}

/* Command pages share one layout contract regardless of the command's own
   markup or how it was invoked. Keep the status row and command body on the
   same responsive gutter, and use the full results canvas. */
#results-page:is(
        .lg-command-mode,
        :has(#results-list .command-result),
        :has(#results-list .command-help-table)
    ) {
    --lg-command-content-gutter: clamp(1rem, 3vw, 2.5rem);
}

#results-page:is(
        .lg-command-mode,
        :has(#results-list .command-result),
        :has(#results-list .command-help-table)
    )
    :is(#results-meta, #results-layout) {
    box-sizing: border-box;
    width: 100%;
    padding-inline: var(--lg-command-content-gutter);
}

#results-page:is(
        .lg-command-mode,
        :has(#results-list .command-result),
        :has(#results-list .command-help-table)
    )
    #results-meta {
    display: flex;
    justify-content: flex-start;
}

/* Command pages use the full layout width, not the narrow web-result column. */
@media (min-width: 768px) {
    #results-page:is(
            .lg-command-mode,
            :has(#results-list .command-result),
            :has(#results-list .command-help-table)
        )
        #results-layout {
        display: grid;
        grid-template-columns: 1fr;
        width: min(100%, var(--literallygoogle-results-layout-max));
        max-width: none;
        margin-inline-start: 0;
        margin-inline-end: auto;
    }

    #results-page:is(
            .lg-command-mode,
            :has(#results-list .command-result),
            :has(#results-list .command-help-table)
        )
        #results-meta {
        width: min(100%, var(--literallygoogle-results-layout-max));
        max-width: none;
        margin-inline-start: 0;
        margin-inline-end: auto;
    }

    #results-page:is(
            .lg-command-mode,
            :has(#results-list .command-result),
            :has(#results-list .command-help-table)
        )
        #results-main {
        grid-column: 1 / -1;
        max-width: none;
        width: 100%;
    }

    #results-page:is(
            .lg-command-mode,
            :has(#results-list .command-result),
            :has(#results-list .command-help-table)
        )
        #results-list {
        max-width: none;
        width: 100%;
    }

    #results-page:is(
            .lg-command-mode,
            :has(#results-list .command-result),
            :has(#results-list .command-help-table)
        )
        #sidebar-col {
        display: none;
    }

    #results-page:is(
            .lg-command-mode,
            :has(#results-list .command-result),
            :has(#results-list .command-help-table)
        )
        #results-list
        :is(.command-result, .command-help-table) {
        max-width: none;
        width: 100%;
        box-sizing: border-box;
    }
}

#results-tabs .tools-toggle {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    max-width: max-content;
    gap: 0.35rem;
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: none;
    border: 0;
    cursor: pointer;
    white-space: nowrap;
}

#results-tabs .tools-toggle:hover,
#results-tabs .tools-toggle.is-open,
#results-tabs .tools-toggle.is-open.active {
    color: var(--text-primary);
}


#results-tabs .tools-toggle.active:not(.is-open) {
    color: var(--text-primary);
    font-weight: 500;
}

#results-tabs .tools-toggle::after {
    content: "";
    display: inline-block;
    width: 0.35rem;
    height: 0.35rem;
    margin-inline-start: 0.15rem;
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
    transition: transform 120ms ease;
}

#results-tabs .tools-toggle.is-open::after {
    transform: rotate(-135deg) translateY(1px);
}

#results-page > .tools-panel.lg-filters-dropdown {
    position: absolute;
    top: var(--lg-filters-top, 7.5rem);
    inset-inline-start: var(--lg-filters-left, 0);
    z-index: 30;
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 0;
    min-width: 12.5rem;
    max-width: min(18rem, calc(100vw - 2rem));
    margin: 0;
    padding: 0.35rem;
    background: var(--lg-sidebar-row-surface);
    border: 1px solid var(--border-light);
    border-radius: var(--theme-radius-lg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
}

#results-page > .tools-panel.lg-filters-dropdown .tools-field {
    position: relative;
    width: 100%;
}

#results-page > .tools-panel.lg-filters-dropdown .tools-field-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 0.65rem 1rem;
    font-size: 0.875rem;
    color: var(--text-primary);
    background: transparent;
    border: 0;
    border-radius: var(--theme-radius-xs);
    cursor: pointer;
    text-align: start;
}

#results-page > .tools-panel.lg-filters-dropdown .tools-field:first-child .tools-field-toggle:hover,
#results-page
    > .tools-panel.lg-filters-dropdown
    .tools-field:first-child
    .tools-field-toggle[aria-expanded="true"] {
    border-start-start-radius: calc(var(--theme-radius-lg) - 0.35rem);
    border-start-end-radius: calc(var(--theme-radius-lg) - 0.35rem);
}

#results-page > .tools-panel.lg-filters-dropdown .tools-field:last-child .tools-field-toggle:hover,
#results-page
    > .tools-panel.lg-filters-dropdown
    .tools-field:last-child
    .tools-field-toggle[aria-expanded="true"] {
    border-end-start-radius: calc(var(--theme-radius-lg) - 0.35rem);
    border-end-end-radius: calc(var(--theme-radius-lg) - 0.35rem);
}

#results-page > .tools-panel.lg-filters-dropdown .tools-field:only-child .tools-field-toggle:hover,
#results-page
    > .tools-panel.lg-filters-dropdown
    .tools-field:only-child
    .tools-field-toggle[aria-expanded="true"] {
    border-radius: calc(var(--theme-radius-lg) - 0.35rem);
}

#results-page > .tools-panel.lg-filters-dropdown .tools-field-toggle:hover,
#results-page
    > .tools-panel.lg-filters-dropdown
    .tools-field-toggle[aria-expanded="true"] {
    background: var(--bg-hover);
}

#results-page > .tools-panel.lg-filters-dropdown .tools-field-label {
    display: none;
}

#results-page > .tools-panel.lg-filters-dropdown .tools-field-value {
    max-width: none;
    font-weight: 400;
}

#results-page > .tools-panel.lg-filters-dropdown .tools-field-value--set {
    color: var(--text-primary);
}

#results-page > .tools-panel.lg-filters-dropdown .tools-field-chevron {
    flex-shrink: 0;
    transform: rotate(-90deg);
    color: var(--text-secondary);
}

#results-page > .tools-panel.lg-filters-dropdown .tools-field-menu {
    position: absolute;
    top: 0;
    inset-inline-start: calc(100% + 0.35rem);
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 12.5rem;
    max-width: min(18rem, calc(100vw - 2rem));
    max-height: min(24rem, 70vh);
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    padding: 0.35rem;
    background: var(--lg-sidebar-row-surface);
    border: 1px solid var(--border-light);
    border-radius: var(--theme-radius-lg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
}

#results-page > .tools-panel.lg-filters-dropdown[data-lg-submenu-side="left"] .tools-field-menu {
    inset-inline-start: auto;
    inset-inline-end: calc(100% + 0.35rem);
}

#results-page > .tools-panel.lg-filters-dropdown .tools-field-menu .tools-option,
#results-page > .tools-panel.lg-filters-dropdown .tools-lang-list .tools-option,
#results-page > .tools-panel.lg-filters-dropdown .tools-field-menu .tools-option.degoog-menu-item,
#results-page > .tools-panel.lg-filters-dropdown .tools-lang-list .tools-option.degoog-menu-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    width: 100%;
    padding: 14px;
    font-size: 0.875rem;
    line-height: 1.2;
    color: var(--text-primary);
    background: var(--lg-sidebar-row-surface);
    border: 0;
    border-radius: var(--theme-radius-xs);
    text-align: start;
    cursor: pointer;
    transition: background 120ms ease, box-shadow 120ms ease, color 120ms ease;
}

#results-page > .tools-panel.lg-filters-dropdown .tools-field-menu > .tools-option:first-child,
#results-page > .tools-panel.lg-filters-dropdown .tools-field-menu > .tools-option:first-child.active,
#results-page > .tools-panel.lg-filters-dropdown .tools-field-menu > .tools-option.degoog-menu-item:first-child,
#results-page > .tools-panel.lg-filters-dropdown .tools-field-menu > .tools-option.degoog-menu-item:first-child.active {
    border-start-start-radius: calc(var(--theme-radius-lg) - 0.35rem);
    border-start-end-radius: calc(var(--theme-radius-lg) - 0.35rem);
}

#results-page
    > .tools-panel.lg-filters-dropdown
    .tools-field-menu
    > .tools-option[data-time="custom"] {
    border-end-start-radius: calc(var(--theme-radius-lg) - 0.35rem);
    border-end-end-radius: calc(var(--theme-radius-lg) - 0.35rem);
}

#results-page
    > .tools-panel.lg-filters-dropdown
    .tools-field-menu.lg-custom-date-open
    > .tools-option[data-time="custom"] {
    border-end-start-radius: calc(var(--theme-radius-xs));
    border-end-end-radius: calc(var(--theme-radius-xs));
}

#results-page > .tools-panel.lg-filters-dropdown .tools-field-menu > .tools-option:not(:first-child),
#results-page > .tools-panel.lg-filters-dropdown .tools-lang-list .tools-option:not(:first-child) {
    border-radius: 0;
}

#results-page > .tools-panel.lg-filters-dropdown .tools-field-menu .tools-option:hover:not(.active),
#results-page > .tools-panel.lg-filters-dropdown .tools-lang-list .tools-option:hover:not(.active) {
    background: var(--lg-row-hover-bg);
    box-shadow: var(--lg-row-hover-shadow);
}

#results-page > .tools-panel.lg-filters-dropdown .tools-field-menu .tools-option.active,
#results-page > .tools-panel.lg-filters-dropdown .tools-lang-list .tools-option.active,
#results-page > .tools-panel.lg-filters-dropdown .tools-field-menu .tools-option.degoog-menu-item.active,
#results-page > .tools-panel.lg-filters-dropdown .tools-lang-list .tools-option.degoog-menu-item.active {
    background: var(--lg-selection-active-bg);
    box-shadow: inset 0 0 0 2px var(--lg-selection-active-ring);
    color: var(--text-primary);
    font-weight: 500;
}

#results-page > .tools-panel.lg-filters-dropdown .tools-field-menu .tools-option.active::before,
#results-page > .tools-panel.lg-filters-dropdown .tools-lang-list .tools-option.active::before,
#results-page > .tools-panel.lg-filters-dropdown .tools-field-menu .tools-option.degoog-menu-item.active::before,
#results-page > .tools-panel.lg-filters-dropdown .tools-lang-list .tools-option.degoog-menu-item.active::before {
    content: none;
    margin: 0;
}

#results-page > .tools-panel.lg-filters-dropdown .tools-field-menu .tools-option.active::after,
#results-page > .tools-panel.lg-filters-dropdown .tools-lang-list .tools-option.active::after,
#results-page > .tools-panel.lg-filters-dropdown .tools-field-menu .tools-option.degoog-menu-item.active::after,
#results-page > .tools-panel.lg-filters-dropdown .tools-lang-list .tools-option.degoog-menu-item.active::after {
    content: "✓";
    flex-shrink: 0;
    font-size: 0.875rem;
    color: var(--lg-selection-accent, #9ac1fd);
}

#results-page > .tools-panel.lg-filters-dropdown .tools-field-menu .tools-option.active:not(:has(.tools-lang-code))::after,
#results-page
    > .tools-panel.lg-filters-dropdown
    .tools-field-menu
    .tools-option.degoog-menu-item.active:not(:has(.tools-lang-code))::after,
#results-page > .tools-panel.lg-filters-dropdown .tools-lang-list .tools-option.active:not(:has(.tools-lang-code))::after,
#results-page
    > .tools-panel.lg-filters-dropdown
    .tools-lang-list
    .tools-option.degoog-menu-item.active:not(:has(.tools-lang-code))::after {
    margin-inline-start: auto;
}

#results-page > .tools-panel.lg-filters-dropdown .tools-field-menu .tools-option.active:has(.tools-lang-code)::after,
#results-page
    > .tools-panel.lg-filters-dropdown
    .tools-field-menu
    .tools-option.degoog-menu-item.active:has(.tools-lang-code)::after,
#results-page > .tools-panel.lg-filters-dropdown .tools-lang-list .tools-option.active:has(.tools-lang-code)::after,
#results-page
    > .tools-panel.lg-filters-dropdown
    .tools-lang-list
    .tools-option.degoog-menu-item.active:has(.tools-lang-code)::after {
    margin-inline-start: 0.35rem;
}

#results-page > .tools-panel.lg-filters-dropdown .tools-lang-filter,
#results-page > .tools-panel.lg-filters-dropdown .tools-lang-filter.degoog-input {
    display: block;
    width: 100%;
    margin: 0 0 0.35rem;
    padding: 14px;
    font-size: 0.875rem;
    line-height: 1.2;
    color: var(--text-primary);
    background: var(--bg-light);
    border: 0;
    border-radius: calc(var(--theme-radius-lg) - 0.35rem);
    box-shadow: none;
    transition: background 120ms ease, box-shadow 120ms ease;
}

#results-page > .tools-panel.lg-filters-dropdown .tools-lang-filter::placeholder {
    color: var(--text-secondary);
    opacity: 1;
}

#results-page > .tools-panel.lg-filters-dropdown .tools-lang-filter:hover {
    background: color-mix(in srgb, #fff 10%, var(--bg-light));
}

#results-page > .tools-panel.lg-filters-dropdown .tools-lang-filter:focus {
    outline: none;
    background: color-mix(in srgb, #fff 8%, var(--bg-light));
    box-shadow: inset 0 0 0 2px var(--lg-selection-active-ring);
}

#results-page > .tools-panel.lg-filters-dropdown .tools-lang-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    overflow-y: auto;
    max-height: min(16.25rem, 55vh);
    scrollbar-width: thin;
    background: var(--bg-light);
    border-radius: calc(var(--theme-radius-lg) - 0.35rem);
}

#results-page > .tools-panel.lg-filters-dropdown .tools-lang-list .tools-option,
#results-page > .tools-panel.lg-filters-dropdown .tools-lang-list .tools-option.degoog-menu-item {
    border-radius: 0;
}

#results-page > .tools-panel.lg-filters-dropdown .tools-lang-list .tools-option:first-child,
#results-page > .tools-panel.lg-filters-dropdown .tools-lang-list .tools-option:first-child.active {
    border-start-start-radius: calc(var(--theme-radius-lg) - 0.35rem);
    border-start-end-radius: calc(var(--theme-radius-lg) - 0.35rem);
}

#results-page > .tools-panel.lg-filters-dropdown .tools-lang-list .tools-option:last-child,
#results-page > .tools-panel.lg-filters-dropdown .tools-lang-list .tools-option:last-child.active {
    border-end-start-radius: calc(var(--theme-radius-lg) - 0.35rem);
    border-end-end-radius: calc(var(--theme-radius-lg) - 0.35rem);
}

#results-page > .tools-panel.lg-filters-dropdown .tools-lang-code {
    margin-inline-start: auto;
    font-size: 0.75rem;
    line-height: 1.2;
    color: var(--text-secondary);
    flex-shrink: 0;
}

#results-page > .tools-panel.lg-filters-dropdown .tools-lang-list .tools-option.active .tools-lang-code {
    color: var(--text-secondary);
}

#results-page > .tools-panel.lg-filters-dropdown .tools-custom-date {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0;
    padding: 14px;
    background: var(--lg-sidebar-row-surface);
    border-end-start-radius: calc(var(--theme-radius-lg) - 0.35rem);
    border-end-end-radius: calc(var(--theme-radius-lg) - 0.35rem);
}

#results-meta .results-meta-stats {
    order: 2;
    flex: 0 0 auto;
    margin-inline-start: auto;
    margin-inline-end: 0;
    text-align: end;
    white-space: nowrap;
}

#results-meta .spell-check-notice {
    order: 1;
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    display: block;
    line-height: 1.35;
    white-space: nowrap;
}

#results-meta #lg-media-engine-pills,
#results-meta .spell-check-notice {
    margin-inline-end: auto;
}

#results-meta .spell-check-notice br {
    display: block;
}

#results-meta .spell-check-notice a {
    display: block;
    margin-top: 0.18rem;
    margin-left: 0;
    color: var(--text-link);
}

#results-meta .spell-check-notice a::before {
    content: none;
}

@media (max-width: 767px) {
    #results-meta:has(.spell-check-notice) {
        justify-content: flex-start !important;
    }
    #results-meta:has(.spell-check-notice) .results-meta-stats {
        margin-inline-start: 0 !important;
        text-align: start !important;
    }
}

#sidebar-col > .sticky > div:empty {
    display: none;
}

#image-filters-bar #image-filter-groups {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    min-width: 100%;
}

#image-filters-bar .degoog-img-filter-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    min-width: 100%;
    flex: 0 0 auto;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    overflow: visible;
}

#image-filters-bar .sidebar-accordion {
    width: 100%;
    min-width: 100%;
    flex: 0 0 auto;
}

#image-filters-bar .degoog-img-filter-group > .degoog-accordion-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 3.2rem;
    padding: 0.85rem 1rem;
    background: var(--lg-sidebar-row-surface) !important;
    border: 0;
    border-start-start-radius: var(--theme-radius-lg);
    border-start-end-radius: var(--theme-radius-lg);
    border-end-start-radius: var(--theme-radius-lg);
    border-end-end-radius: var(--theme-radius-lg);
    color: var(--text-primary);
    box-sizing: border-box;
    cursor: pointer;
}

#image-filters-bar .degoog-img-filter-group.open > .degoog-accordion-toggle {
    border-end-start-radius: var(--theme-radius-xs);
    border-end-end-radius: var(--theme-radius-xs);
}

#image-filters-bar .degoog-accordion-toggle .accordion-chevron,
#image-filters-bar .degoog-accordion-toggle .degoog-img-filter-head,
#image-filters-bar .sidebar-accordion-toggle .accordion-chevron {
    pointer-events: none;
}

#image-filters-bar .sidebar-accordion-toggle.degoog-accordion-toggle--sidebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 3.2rem;
    box-sizing: border-box;
}

#image-filters-bar .degoog-panel--stack-item {
    margin-bottom: 0;
}

.degoog-img-filter-options {
    flex-direction: column;
    gap: 2px;
    padding: 0;
    max-height: none;
    overflow: visible;
    background: transparent;
}

#image-filters-bar .degoog-img-filter-group:not(.open) > .degoog-accordion-body,
#image-filters-bar .degoog-img-filter-group:not(.open) > .degoog-img-filter-options {
    display: none;
}

#image-filters-bar .degoog-img-filter-group.open > .degoog-accordion-body,
#image-filters-bar .degoog-img-filter-group.open > .degoog-img-filter-options {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.degoog-img-filter-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: var(--literallygoogle-row-padding);
    font-size: 0.875rem;
    line-height: 1.2;
    color: var(--text-primary);
    background: var(--lg-sidebar-row-surface);
    border: 0;
    border-radius: var(--theme-radius-xs);
    text-align: start;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.degoog-img-filter-option:last-child:not(:only-child) {
    border-end-start-radius: var(--theme-radius-md);
    border-end-end-radius: var(--theme-radius-md);
}

.degoog-img-filter-option:hover:not(.is-active) {
    background: var(--lg-row-hover-bg);
    box-shadow: var(--lg-row-hover-shadow);
}

.degoog-img-filter-option.is-active {
    background: var(--lg-selection-active-bg);
    box-shadow: inset 0 0 0 2px var(--lg-selection-active-ring);
    color: var(--text-primary);
    font-weight: 500;
    border-radius: var(--theme-radius-xs);
}

.degoog-img-filter-option.is-active:last-child:not(:only-child) {
    border-end-start-radius: var(--theme-radius-md);
    border-end-end-radius: var(--theme-radius-md);
}

.degoog-img-filter-option.is-active::after {
    display: none;
}

.degoog-img-filter-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#image-filters-bar .degoog-img-sidebar-body {
    gap: 2px;
    padding: 0.3rem 0.75rem 0.85rem;
    overflow-y: auto;
    max-height: none;
}

#image-filters-bar .degoog-img-sidebar {
    height: 100%;
    padding: 0;
    background: transparent;
}

#image-filters-bar .degoog-img-sidebar-head {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 0.9rem 0.9rem 0.2rem;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--bg) 94%, transparent) 0%,
            color-mix(in srgb, var(--bg) 72%, transparent) 72%,
            transparent 100%
        );
    border-bottom: 0;
}

#image-filters-bar .degoog-img-sidebar-title {
    display: none;
}

#image-filters-bar .degoog-img-sidebar-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.7rem;
    height: 2.7rem;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--border-light) 80%, transparent);
    border-radius: var(--theme-radius-pill);
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--bg-light) 88%, transparent),
            color-mix(in srgb, var(--bg) 88%, transparent)
        );
    color: var(--text-secondary);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--text-primary) 4%, transparent),
        0 8px 18px color-mix(in srgb, var(--text-primary) 8%, transparent);
    cursor: pointer;
}

#image-filters-bar .degoog-img-sidebar-close:hover {
    background: var(--lg-row-hover-bg);
    color: var(--text-primary);
}

#image-filters-bar .degoog-img-sidebar-close svg {
    width: 1rem;
    height: 1rem;
    display: block;
}

#image-filters-bar .degoog-img-sidebar-body {
    scrollbar-gutter: stable;
}

#image-filters-bar #image-engine-panel:empty {
    display: none;
}

@media (min-width: 768px) {
    #image-filters-bar {
        top: auto;
        bottom: auto;
        width: var(--literallygoogle-media-filter-width);
        max-width: var(--literallygoogle-media-filter-width);
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    #image-filters-bar .degoog-img-sidebar {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        max-height: 100%;
        height: 100%;
        padding: 0;
    }

    #image-filters-bar .degoog-img-sidebar-head {
        display: none;
    }

    #image-filters-bar .degoog-img-sidebar-body {
        gap: 2px;
        padding: 0;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        max-height: none;
        box-sizing: border-box;
        width: 100%;
        margin-inline: 0;
    }

    #image-filters-bar .degoog-img-filter-group {
        display: flex;
        flex-direction: column;
        gap: 2px;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        overflow: visible;
    }

    #image-filters-bar .degoog-img-filter-group > .degoog-accordion-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 0.85rem 1rem;
        background: var(--lg-sidebar-row-surface) !important;
        border: 0;
        border-start-start-radius: var(--theme-radius-lg);
        border-start-end-radius: var(--theme-radius-lg);
        border-end-start-radius: var(--theme-radius-lg);
        border-end-end-radius: var(--theme-radius-lg);
        color: var(--text-primary);
        box-sizing: border-box;
    }

    #image-filters-bar .degoog-img-filter-group.open > .degoog-accordion-toggle {
        border-end-start-radius: var(--theme-radius-xs);
        border-end-end-radius: var(--theme-radius-xs);
    }

    #image-filters-bar .degoog-img-filter-head {
        gap: 0.45rem;
    }

    #image-filters-bar .degoog-img-filter-current {
        font-size: 0.75rem;
        color: var(--text-link);
    }

    #image-filters-bar .degoog-img-filter-options {
        background: transparent;
        border-end-start-radius: 0;
        border-end-end-radius: 0;
        padding: 0;
    }
}

@media (min-width: 768px) {
    body > #image-filters-bar.lg-image-fab-drawer,
    #results-page.lg-image-fab-filters #image-filters-bar {
        --lg-fab-inset-inline: 1rem;
        --lg-fab-inset-bottom: 1rem;
        position: fixed !important;
        order: initial !important;
        flex: 0 0 auto !important;
        align-self: auto !important;
        top: auto !important;
        margin: 0 !important;
        transform: none !important;
        background: var(--bg);
        border: 1px solid var(--border-light);
        border-radius: clamp(1.5rem, 2.25vw, 2rem);
        box-shadow:
            0 24px 56px rgba(0, 0, 0, 0.3),
            0 8px 20px rgba(0, 0, 0, 0.18);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        overflow: hidden;
        z-index: 100000;
        transition:
            width var(--lg-drawer-duration) var(--lg-drawer-ease-open),
            height var(--lg-drawer-duration) var(--lg-drawer-ease-open),
            max-width var(--lg-drawer-duration) var(--lg-drawer-ease-open),
            max-height var(--lg-drawer-duration) var(--lg-drawer-ease-open),
            border-radius var(--lg-drawer-duration) var(--lg-drawer-ease-open),
            inset-inline-start var(--lg-drawer-duration) var(--lg-drawer-ease-open),
            inset-inline-end var(--lg-drawer-duration) var(--lg-drawer-ease-open),
            bottom var(--lg-drawer-duration) var(--lg-drawer-ease-open),
            background var(--lg-drawer-duration) var(--lg-drawer-ease-open),
            border-color var(--lg-drawer-duration) var(--lg-drawer-ease-open),
            box-shadow var(--lg-drawer-duration) var(--lg-drawer-ease-open),
            opacity 180ms ease,
            visibility 0s linear var(--lg-drawer-duration);
    }

    body
        > #image-filters-bar.lg-image-fab-drawer:not(.open):not(
            .lg-image-drawer-animating
        ),
    #results-page.lg-image-fab-filters
        #image-filters-bar:not(.open):not(.lg-image-drawer-animating) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    body > #image-filters-bar.lg-image-fab-drawer.lg-image-drawer-animating:not(.open),
    #results-page.lg-image-fab-filters #image-filters-bar.lg-image-drawer-animating:not(.open) {
        display: block !important;
        width: var(--lg-fab-size) !important;
        height: var(--lg-fab-size) !important;
        min-width: var(--lg-fab-size) !important;
        max-width: var(--lg-fab-size) !important;
        min-height: var(--lg-fab-size) !important;
        max-height: var(--lg-fab-size) !important;
        border-radius: calc(var(--lg-fab-size) / 2) !important;
        inset-inline-start: var(--lg-fab-inset-inline) !important;
        inset-inline-end: auto !important;
        bottom: var(--lg-fab-inset-bottom) !important;
        background: var(--bg-light);
        border-color: color-mix(in srgb, var(--border-light) 82%, transparent);
        box-shadow:
            0 12px 28px rgba(0, 0, 0, 0.22),
            inset 0 1px 0 color-mix(in srgb, var(--text-primary) 6%, transparent);
        visibility: visible;
        opacity: 1;
        pointer-events: none;
        /* Keep the shrinking "modal" below the FAB while closing. */
        z-index: 9999;
        transition:
            width var(--lg-drawer-duration) var(--lg-drawer-ease-close),
            height var(--lg-drawer-duration) var(--lg-drawer-ease-close),
            max-width var(--lg-drawer-duration) var(--lg-drawer-ease-close),
            max-height var(--lg-drawer-duration) var(--lg-drawer-ease-close),
            border-radius var(--lg-drawer-duration) var(--lg-drawer-ease-close),
            inset-inline-start var(--lg-drawer-duration) var(--lg-drawer-ease-close),
            inset-inline-end var(--lg-drawer-duration) var(--lg-drawer-ease-close),
            bottom var(--lg-drawer-duration) var(--lg-drawer-ease-close),
            background var(--lg-drawer-duration) var(--lg-drawer-ease-close),
            border-color var(--lg-drawer-duration) var(--lg-drawer-ease-close),
            box-shadow var(--lg-drawer-duration) var(--lg-drawer-ease-close),
            opacity 180ms ease,
            visibility 0s;
    }

    body
        > #image-filters-bar.lg-image-fab-drawer.lg-image-drawer-anchor-end.lg-image-drawer-animating:not(
            .open
        ),
    #results-page.lg-image-fab-filters
        #image-filters-bar.lg-image-drawer-anchor-end.lg-image-drawer-animating:not(.open) {
        inset-inline-start: auto !important;
        inset-inline-end: var(--lg-fab-inset-inline) !important;
    }

    body > #image-filters-bar.lg-image-fab-drawer.open.lg-image-drawer-animating:not(.lg-image-drawer-open-ready),
    #results-page.lg-image-fab-filters
        #image-filters-bar.open.lg-image-drawer-animating:not(.lg-image-drawer-open-ready) {
        width: var(--lg-fab-size) !important;
        height: var(--lg-fab-size) !important;
        min-width: var(--lg-fab-size) !important;
        max-width: var(--lg-fab-size) !important;
        min-height: var(--lg-fab-size) !important;
        max-height: var(--lg-fab-size) !important;
        border-radius: calc(var(--lg-fab-size) / 2) !important;
        box-shadow:
            0 12px 28px rgba(0, 0, 0, 0.22),
            inset 0 1px 0 color-mix(in srgb, var(--text-primary) 6%, transparent);
    }

    body > #image-filters-bar.lg-image-fab-drawer.open.lg-image-drawer-animating:not(.lg-image-drawer-open-ready)
        .degoog-img-sidebar-body,
    body > #image-filters-bar.lg-image-fab-drawer.open.lg-image-drawer-animating:not(.lg-image-drawer-open-ready)
        .degoog-img-sidebar-head,
    #results-page.lg-image-fab-filters
        #image-filters-bar.open.lg-image-drawer-animating:not(.lg-image-drawer-open-ready)
        .degoog-img-sidebar-body,
    #results-page.lg-image-fab-filters
        #image-filters-bar.open.lg-image-drawer-animating:not(.lg-image-drawer-open-ready)
        .degoog-img-sidebar-head {
        opacity: 0 !important;
        pointer-events: none !important;
    }

    body > #image-filters-bar.lg-image-fab-drawer.open,
    #results-page.lg-image-fab-filters #image-filters-bar.open {
        display: block !important;
        width: var(--lg-drawer-width-desktop) !important;
        max-width: var(--lg-drawer-width-desktop) !important;
        min-width: 0 !important;
        height: min(44rem, var(--lg-drawer-max-height, calc(100dvh - 2rem))) !important;
        max-height: var(--lg-drawer-max-height, calc(100dvh - 2rem)) !important;
        min-height: 0 !important;
        inset-inline-start: var(--lg-fab-inset-inline) !important;
        inset-inline-end: auto !important;
        bottom: var(--lg-fab-inset-bottom) !important;
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }

    body > #image-filters-bar.lg-image-fab-drawer.open.lg-image-drawer-anchor-end,
    #results-page.lg-image-fab-filters #image-filters-bar.open.lg-image-drawer-anchor-end {
        inset-inline-start: auto !important;
        inset-inline-end: var(--lg-fab-inset-inline) !important;
    }

    body > #image-filters-bar.lg-image-fab-drawer .degoog-img-sidebar,
    #results-page.lg-image-fab-filters #image-filters-bar .degoog-img-sidebar {
        display: flex;
        height: 100%;
        max-height: 100%;
        min-height: 0;
    }

    body > #image-filters-bar.lg-image-fab-drawer .degoog-img-sidebar-head,
    #results-page.lg-image-fab-filters #image-filters-bar .degoog-img-sidebar-head {
        display: flex;
        justify-content: center;
        padding: 0.35rem 0.9rem;
    }

    body > #image-filters-bar.lg-image-fab-drawer .degoog-img-sidebar-body,
    #results-page.lg-image-fab-filters #image-filters-bar .degoog-img-sidebar-body {
        padding: 0 0.8rem 0.6rem;
    }
}

/* Core sticky sidebar setting.
   Grid column = panel width + scroll lane. Internal scroll only after the column
   has physically stuck (lg-sidebar-is-stuck). Top inset clears the sticky header
   stack; bottom inset mirrors the live header-bottom → sidebar-top gap. */

@media (min-width: 768px) {
    #sidebar-col.is-sticky {
        position: sticky;
        top: calc(
            var(
                    --literallygoogle-sticky-header-offset,
                    calc(50px + 1.5rem)
                ) +
                var(--literallygoogle-sticky-sidebar-gap, 0.5rem)
        );
        align-self: start;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        height: auto;
        overflow: visible;
        max-height: none;
    }

    #sidebar-col.is-sticky:not(.lg-sidebar-is-stuck) {
        overflow: visible !important;
        max-height: none !important;
    }

    #sidebar-col.is-sticky.lg-sidebar-is-stuck {
        min-height: 0;
        max-height: calc(
            100vh -
                var(
                    --literallygoogle-sticky-header-offset,
                    calc(50px + 1.5rem)
                ) -
                var(--literallygoogle-sidebar-bottom-inset, 1.5rem)
        );
        overflow-x: hidden;
        overflow-y: hidden;
        overscroll-behavior: auto;
        scrollbar-width: none;
    }

    #sidebar-col.is-sticky.lg-sidebar-is-stuck.lg-sidebar-scroll-active {
        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-width: thin;
    }

    #sidebar-col.is-sticky.lg-sidebar-is-stuck.lg-sidebar-scroll-active::-webkit-scrollbar {
        display: block;
        width: var(--lg-sidebar-scrollbar-size);
    }

    #sidebar-col.is-sticky.lg-sidebar-is-stuck.lg-sidebar-scroll-active::-webkit-scrollbar-track {
        background: transparent;
    }

    #sidebar-col.is-sticky > .sticky {
        flex: 0 0 auto;
        align-self: start;
        width: var(--literallygoogle-results-sidebar-max);
        max-width: var(--literallygoogle-results-sidebar-max);
        height: auto;
        min-height: 0;
        max-height: none;
        overflow: visible;
        box-sizing: border-box;
        margin-inline: 0;
    }

    #sidebar-col.is-sticky.lg-sidebar-is-stuck > .sticky {
        padding-bottom: var(--literallygoogle-sidebar-bottom-inset, 1.5rem);
    }
}

#results-main,
#sidebar-col,
#slot-above-results,
#slot-below-results,
#pagination {
    min-width: 0;
}

/* Long unbroken URL paths must wrap — never overflow the main grid cell into
   the sidebar column. Defense-in-depth regardless of layout state. */
.result-cite,
.breadcrumb-trail {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.bc-item {
    word-break: break-word;
}

#pagination {
    margin: 2rem 0 0;
    padding: 0 0 0.25rem;
}

#pagination:empty {
    display: none;
    margin: 0;
    padding: 0;
}

#pagination .pagination {
    margin: 0;
}

.lg-pager {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 36rem;
    margin: 0 auto;
    padding: 0;
}

.lg-pager-wordmark {
    --lg-pager-page-size: 1.4rem;
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto;
    justify-content: center;
    column-gap: 0;
    row-gap: 0.05rem;
    min-width: 0;
    font-size: clamp(2rem, 5.5vw, 2.75rem);
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1;
    white-space: nowrap;
    user-select: none;
}

/* Prev/next flank the degoooooooog letters (not the page numbers). */
.lg-pager-letters-line {
    display: flex;
    grid-column: 1 / -1;
    align-items: baseline;
    justify-content: center;
    gap: 0.65rem;
    max-width: 100%;
}

.lg-pager-letters-core {
    display: grid;
    grid-template-columns: auto auto auto;
    align-items: baseline;
    column-gap: 0;
}

.lg-pager-prefix,
.lg-pager-suffix {
    display: flex;
}

.lg-pager-o-track {
    display: grid;
    grid-template-columns: repeat(var(--lg-pager-page-count, 10), var(--lg-pager-page-size));
    justify-items: center;
}

.lg-pager-letter {
    display: inline-block;
    line-height: 1;
}

.lg-pager-blue {
    color: #8ab4f8;
}

.lg-pager-red {
    color: #f28b82;
}

.lg-pager-yellow {
    color: #fdd663;
}

.lg-pager-green {
    color: #81c995;
}

/* Dark UI: plain white wordmark; current page's "o" is Google blue. */
[data-theme="dark"] .lg-pager-letters-core .lg-pager-letter,
[data-theme="dark"] .lg-pager-letters-core .lg-pager-o {
    color: #fff !important;
}

[data-theme="dark"] .lg-pager-letters-core .lg-pager-o--active {
    color: #8ab4f8 !important;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .lg-pager-letters-core .lg-pager-letter,
    :root:not([data-theme="light"]) .lg-pager-letters-core .lg-pager-o {
        color: #fff !important;
    }

    :root:not([data-theme="light"]) .lg-pager-letters-core .lg-pager-o--active {
        color: #8ab4f8 !important;
    }
}

[data-theme="light"] .lg-pager-o--active {
    color: #4285f4 !important;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .lg-pager-o--active {
        color: #4285f4 !important;
    }
}

[data-theme="light"] .lg-pager-blue {
    color: #4285f4;
}

[data-theme="light"] .lg-pager-red {
    color: #ea4335;
}

[data-theme="light"] .lg-pager-yellow {
    color: #fbbc04;
}

[data-theme="light"] .lg-pager-green {
    color: #34a853;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .lg-pager-blue {
        color: #4285f4;
    }

    :root:not([data-theme="dark"]) .lg-pager-red {
        color: #ea4335;
    }

    :root:not([data-theme="dark"]) .lg-pager-yellow {
        color: #fbbc04;
    }

    :root:not([data-theme="dark"]) .lg-pager-green {
        color: #34a853;
    }
}

.lg-pager-pages {
    display: grid;
    grid-column: 2;
    grid-row: 2;
    grid-template-columns: repeat(var(--lg-pager-page-count, 10), var(--lg-pager-page-size));
    align-items: center;
    justify-items: center;
    justify-self: center;
    min-height: 1.5rem;
    width: 100%;
}

.lg-pager-page,
.lg-pager-control {
    color: var(--text-link);
    background: transparent;
    border: 0;
    border-radius: var(--theme-radius-pill);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}

.lg-pager-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    width: 100%;
    padding: 0.25rem 0;
    text-align: center;
}

.lg-pager-page:hover,
.lg-pager-control:hover {
    text-decoration: underline;
}

.lg-pager-page--active,
.lg-pager-page--active:hover {
    color: var(--text-primary);
    cursor: default;
    text-decoration: none;
}

.lg-pager-letters-line > .lg-pager-control {
    flex: 0 0 auto;
    align-self: center;
    margin-bottom: 0.12em;
}

.lg-pager-control {
    display: grid;
    grid-template-rows: auto auto;
    justify-items: center;
    gap: 0.15rem;
    padding: 0;
}

.lg-pager-arrow {
    color: var(--text-link);
    font-size: 1.9rem;
    font-weight: 500;
    line-height: 0.85;
}

.lg-pager-control--prev10 .lg-pager-arrow,
.lg-pager-control--next10 .lg-pager-arrow {
    font-size: 1.55rem;
    letter-spacing: -0.18em;
}

.lg-pager-control--prev10 .lg-pager-control-label,
.lg-pager-control--next10 .lg-pager-control-label {
    display: none;
}

.lg-pager-control-label {
    font-size: 0.88rem;
    line-height: 1.15;
}

.lg-pager-control--disabled {
    visibility: hidden;
    pointer-events: none;
}

@media (max-width: 560px) {
    #pagination {
        margin-top: 1.5rem;
        padding-bottom: 0.25rem;
    }

    .lg-pager-letters-line {
        gap: 0.4rem;
    }

    .lg-pager-wordmark {
        --lg-pager-page-size: 1.18rem;
        font-size: 2rem;
    }

    .lg-pager-pages {
        overflow-x: auto;
        max-width: 100%;
        scrollbar-width: none;
    }

    .lg-pager-pages::-webkit-scrollbar {
        display: none;
    }
}

@media (max-width: 400px) {
    .lg-pager {
        overflow: hidden;
    }

    .lg-pager-letters-line {
        gap: 0.2rem;
    }

    .lg-pager-wordmark {
        --lg-pager-page-size: 0.9rem;
        max-width: 100%;
        font-size: 1.6rem;
    }

    .lg-pager-arrow {
        font-size: 1.55rem;
    }

    .lg-pager-control--prev10 .lg-pager-arrow,
    .lg-pager-control--next10 .lg-pager-arrow {
        font-size: 1.3rem;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   RESULTS-PAGE LOGO
   Matches default degoog / `style_002.css`: responsive clamp + `padding-inline-end`
   between wordmark and search. A previous 22px + extra left padding made the
   mark read smaller than upstream and shoved the bar right of the tabs row.
   ══════════════════════════════════════════════════════════════════════════ */

.results-logo {
    font-size: var(--literallygoogle-results-logo-size);
    font-weight: 500;
    letter-spacing: -1px;
    text-decoration: none;
    white-space: nowrap;
    color: var(--text-primary);
    flex-shrink: 0;
    align-self: center;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    padding-inline-start: 0;
    padding-inline-end: 1rem;
}
@media (min-width: 768px) {
    .results-logo {
        margin-top: -5px;
    }
}
.results-logo:visited {
    color: var(--text-primary);
}

/* ══════════════════════════════════════════════════════════════════════════
   CONTAINER
   Generic page-width wrapper for the results layout.
   ══════════════════════════════════════════════════════════════════════════ */

.container {
    width: 100%;
    max-width: var(--literallygoogle-results-layout-max);
    margin: 0 auto;
    padding-block: 0;
    padding-inline: 2.5rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   SKELETON LOADING
   Placeholder shimmer cards shown while results are being fetched.
   ══════════════════════════════════════════════════════════════════════════ */

.skeleton-card:first-child {
    margin-top: 0;
}

@keyframes shimmer-slide {
    0% { transform: translate3d(-100%, 0, 0); }
    100% { transform: translate3d(100%, 0, 0); }
}

#results-list .image-thumb-wrap {
    position: relative;
    overflow: hidden;
    background: var(--bg-light);
    border-radius: var(--theme-radius-md);
}

#results-list .image-thumb-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        90deg,
        transparent,
        color-mix(in srgb, var(--bg-hover) 80%, transparent),
        transparent
    );
    transform: translate3d(-100%, 0, 0);
    animation: shimmer-slide 1.5s infinite linear;
}

#results-list .image-thumb-wrap.loaded::before {
    display: none !important;
}

#results-list .image-thumb-wrap img.image-thumb {
    position: relative;
    z-index: 2;
    opacity: 0;
    transition: opacity 250ms ease-in-out;
}

#results-list .image-thumb-wrap.loaded img.image-thumb {
    opacity: 1;
}

#results-page #results-list .image-card {
    overflow: visible;
    border-radius: var(--theme-radius-md);
}

#results-page #results-list .image-thumb {
    border-radius: inherit;
}

#results-page #results-list .image-info {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 0.16rem;
    width: 100%;
    max-width: 100%;
    padding: 0.4rem 0 0.35rem;
    background: transparent;
    opacity: 1;
    overflow: hidden;
    box-sizing: border-box;
}

#results-page #results-list .image-card.lg-img-loaded:hover .image-info {
    opacity: 1;
}

#results-page #results-list .image-card:not(.lg-img-loaded) .image-info {
    opacity: 0 !important;
    visibility: hidden !important;
    max-height: 0;
    padding: 0 !important;
    margin: 0;
    overflow: hidden;
    pointer-events: none;
}

#results-page #results-list .image-card.lg-img-loaded .image-info {
    opacity: 1 !important;
    visibility: visible !important;
    max-height: none;
    transition: opacity 220ms ease;
}

#results-page #results-list .image-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.22;
    text-decoration: none;
}

#results-page #results-list .image-source-row {
    display: flex;
    align-items: center;
    gap: 0.28rem;
    min-width: 0;
    max-width: 100%;
    color: var(--text-secondary);
    font-size: 0.75rem;
    line-height: 1.2;
    text-decoration: none;
}

#results-page #results-list .lg-image-meta-link {
    cursor: pointer;
}

#results-page #results-list .lg-image-meta-link:visited {
    color: inherit;
}

#results-page #results-list .image-card:has(a.image-title:hover, a.image-source-row:hover, a.image-title:focus-visible, a.image-source-row:focus-visible) a.image-title {
    text-decoration: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.14em;
}

#results-page #results-list .image-favicon {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    border-radius: var(--theme-radius-xs);
    object-fit: contain;
    background: var(--bg-light);
}

#results-page #results-list .image-source {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--text-secondary);
}

#results-page #results-list .image-card:has(a.image-title:hover, a.image-source-row:hover, a.image-title:focus-visible, a.image-source-row:focus-visible) a.image-source-row .image-source {
    color: var(--text-link);
    text-decoration: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.14em;
}


.skeleton-card {
    padding: 1rem 0;
}

.skeleton-line {
    height: 14px;
    background: var(--bg-light);
    border-radius: var(--theme-radius-xs);
    margin-bottom: 0.75rem;
}

#at-a-glance .skeleton-glance,
#at-a-glance .glance-ai-skeleton {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

#at-a-glance .skeleton-line {
    position: relative;
    overflow: hidden;
    margin-bottom: 0;
    background: color-mix(in srgb, var(--bg-hover) 55%, var(--bg-light));
}

#at-a-glance .skeleton-line::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent,
        color-mix(in srgb, var(--text-primary) 16%, transparent),
        transparent
    );
    transform: translate3d(-100%, 0, 0);
    animation: shimmer-slide 1.5s infinite linear;
}

.skeleton-line--url {
    width: 40%;
}

.skeleton-line--title {
    width: 70%;
}

.skeleton-line--snippet {
    width: 90%;
}

.skeleton-line--snippet-short {
    width: 60%;
}

/* ══════════════════════════════════════════════════════════════════════════
   SETTINGS PAGE
   Matches examples/theannoying-degoog-extensions/themes/LiterallyGoogle.
   ══════════════════════════════════════════════════════════════════════════ */

.settings-page .btn {
    border-radius: var(--theme-radius-pill);
}

/* Filled secondary buttons on settings pages — not outline/transparent. */
.settings-page .btn--secondary:not(.ext-card-configure):not(.ext-card-apply),
.settings-page .degoog-btn--secondary:not(.ext-card-configure):not(.ext-card-apply) {
    background: var(--btn-bg) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-secondary) !important;
}

.settings-page .btn--secondary:not(.ext-card-configure):not(.ext-card-apply):hover,
.settings-page .degoog-btn--secondary:not(.ext-card-configure):not(.ext-card-apply):hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

/* Use ring shadows instead of border so track/knob box model matches core CSS
   (borders on ::after shift “off” position and leave a visible left gap). */
.toggle-slider {
    border: none;
    box-shadow: inset 0 0 0 1px var(--border);
}

.toggle-slider::after {
    border: none;
    box-shadow: 0 0 0 1px var(--border-light);
}

.settings-tab-select {
    border-radius: var(--theme-radius-pill);
}

[data-theme="light"] .settings-page-body {
    background: var(--lg-settings-page-bg-light);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .settings-page-body {
        background: var(--lg-settings-page-bg-light);
    }
}

.settings-section-heading:has(+ .settings-fieldset) {
    margin-bottom: 10px;
}

.settings-nav-item {
    border-radius: var(--theme-radius-pill);
}

.settings-nav-item.active {
    box-shadow: none;
    border: none;
    font-weight: normal;
}

/* Core paints nav hover with var(--bg-light); use var(--bg-hover) so light tokens (#e8eaed) match the upstream example. */
:root:not([data-theme="dark"]) .settings-nav-item:hover {
    background: var(--bg-hover);
}

.settings-nav-search,
.settings-global-search {
    border-radius: var(--theme-radius-pill);
}

/* Settings sidebar filter may not use `.search-bar`; paint the shell like the reference theme
   so the field is not a flat white block on #f0f4f9 (see examples/theannoying-degoog-extensions). */
:root:not([data-theme="dark"]) .settings-nav-search,
:root:not([data-theme="dark"]) .settings-global-search {
    background: var(--bg);
    border: 1px solid var(--border);
    box-shadow: var(--lg-search-shadow);
}

:root:not([data-theme="dark"]) .settings-nav-search:hover,
:root:not([data-theme="dark"]) .settings-global-search:hover {
    box-shadow: var(--lg-search-shadow-hover);
}

:root:not([data-theme="dark"]) .settings-nav-search:focus-within,
:root:not([data-theme="dark"]) .settings-global-search:focus-within {
    background: var(--search-bar-focused);
}

:root:not([data-theme="dark"]) .settings-nav-search input,
:root:not([data-theme="dark"]) .settings-nav-search .search-input,
:root:not([data-theme="dark"]) .settings-nav-search .ext-field-input,
:root:not([data-theme="dark"]) .settings-global-search input,
:root:not([data-theme="dark"]) .settings-global-search .search-input,
:root:not([data-theme="dark"]) .settings-global-search .ext-field-input {
    background: transparent;
    color: var(--text-primary);
    caret-color: var(--text-primary);
}

:root:not([data-theme="dark"]) .settings-nav-search input::placeholder,
:root:not([data-theme="dark"]) .settings-nav-search .search-input::placeholder,
:root:not([data-theme="dark"]) .settings-nav-search .ext-field-input::placeholder,
:root:not([data-theme="dark"]) .settings-global-search input::placeholder,
:root:not([data-theme="dark"]) .settings-global-search .search-input::placeholder,
:root:not([data-theme="dark"]) .settings-global-search .ext-field-input::placeholder {
    color: var(--text-secondary);
    opacity: 1;
}

[data-theme="dark"] .settings-nav-search,
[data-theme="dark"] .settings-global-search {
    background: var(--search-bar-bg);
    border: 1px solid var(--border);
}

[data-theme="dark"] .settings-nav-search:focus-within,
[data-theme="dark"] .settings-global-search:focus-within {
    background: var(--search-bar-focused);
}

[data-theme="dark"] .settings-nav-search input,
[data-theme="dark"] .settings-nav-search .search-input,
[data-theme="dark"] .settings-nav-search .ext-field-input,
[data-theme="dark"] .settings-global-search input,
[data-theme="dark"] .settings-global-search .search-input,
[data-theme="dark"] .settings-global-search .ext-field-input {
    background: transparent;
    color: var(--text-primary);
    caret-color: var(--text-primary);
}

[data-theme="dark"] .settings-nav-search input::placeholder,
[data-theme="dark"] .settings-nav-search .search-input::placeholder,
[data-theme="dark"] .settings-nav-search .ext-field-input::placeholder,
[data-theme="dark"] .settings-global-search input::placeholder,
[data-theme="dark"] .settings-global-search .search-input::placeholder,
[data-theme="dark"] .settings-global-search .ext-field-input::placeholder {
    color: var(--text-secondary);
    opacity: 1;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]):not([data-theme="light"]) .settings-nav-search,
    :root:not([data-theme="dark"]):not([data-theme="light"]) .settings-global-search {
        background: var(--bg);
        border: 1px solid var(--border);
        box-shadow: var(--lg-search-shadow);
    }

    :root:not([data-theme="dark"]):not([data-theme="light"]) .settings-nav-search:hover,
    :root:not([data-theme="dark"]):not([data-theme="light"]) .settings-global-search:hover {
        box-shadow: var(--lg-search-shadow-hover);
    }

    :root:not([data-theme="dark"]):not([data-theme="light"]) .settings-nav-search:focus-within,
    :root:not([data-theme="dark"]):not([data-theme="light"]) .settings-global-search:focus-within {
        background: var(--search-bar-focused);
    }

    :root:not([data-theme="dark"]):not([data-theme="light"]) .settings-nav-search input,
    :root:not([data-theme="dark"]):not([data-theme="light"]) .settings-nav-search .search-input,
    :root:not([data-theme="dark"]):not([data-theme="light"]) .settings-nav-search .ext-field-input,
    :root:not([data-theme="dark"]):not([data-theme="light"]) .settings-global-search input,
    :root:not([data-theme="dark"]):not([data-theme="light"]) .settings-global-search .search-input,
    :root:not([data-theme="dark"]):not([data-theme="light"]) .settings-global-search .ext-field-input {
        background: transparent;
        color: var(--text-primary);
        caret-color: var(--text-primary);
    }

    :root:not([data-theme="dark"]):not([data-theme="light"]) .settings-nav-search input::placeholder,
    :root:not([data-theme="dark"]):not([data-theme="light"]) .settings-nav-search .search-input::placeholder,
    :root:not([data-theme="dark"]):not([data-theme="light"]) .settings-nav-search .ext-field-input::placeholder,
    :root:not([data-theme="dark"]):not([data-theme="light"]) .settings-global-search input::placeholder,
    :root:not([data-theme="dark"]):not([data-theme="light"]) .settings-global-search .search-input::placeholder,
    :root:not([data-theme="dark"]):not([data-theme="light"]) .settings-global-search .ext-field-input::placeholder {
        color: var(--text-secondary);
        opacity: 1;
    }
}

:root:not([data-theme="dark"]) .settings-nav-item.active {
    background: white;
}

:root:not([data-theme="dark"]) .settings-nav-item.active:hover {
    background: white;
}

.ext-group-label {
    text-transform: capitalize;
}

.store-updates-body,
.settings-fieldset,
.ext-cards {
    gap: 2px;
}

.store-updates-row {
    padding: 17px;
    border-radius: var(--theme-radius-xs);
    background: var(--bg);
}

.ext-card:not(.settings-section) {
    padding: 17px;
    border: none;
    border-radius: var(--theme-radius-xs);
    background: var(--lg-settings-row-bg);
}

.settings-section:not(.store-catalog-section) {
    box-shadow: none;
    background: none;
    border: none;
    padding: 0;
    margin: 0 0 2rem;
}

#settings-search-no-results {
    background: none;
    padding: 0;
}

.store-updates-body > div:first-child,
.ext-cards > div:first-child {
    border-start-start-radius: var(--theme-radius-xl);
    border-start-end-radius: var(--theme-radius-xl);
}

.store-updates-body > div:last-child,
.ext-cards > div:last-child {
    border-end-start-radius: var(--theme-radius-xl);
    border-end-end-radius: var(--theme-radius-xl);
}

.store-updates-row:not(:has(+ .store-updates-row)):not(
        .store-updates-row + .store-updates-row
    ) {
    border-radius: var(--theme-radius-xl);
}

/* Stacked toggle rows in settings fieldsets (rate limit, bot control, etc.).
   Use :first-of-type/:last-of-type so option panels between toggles do not
   break the stack; drop the old adjacent-sibling rule that rounded every row. */
.settings-fieldset > .settings-toggle-wrap {
    border-radius: var(--theme-radius-xs);
}

.settings-fieldset > .settings-toggle-wrap:first-of-type {
    border-start-start-radius: var(--theme-radius-xl);
    border-start-end-radius: var(--theme-radius-xl);
}

.settings-fieldset > .settings-toggle-wrap:last-of-type {
    border-end-start-radius: var(--theme-radius-xl);
    border-end-end-radius: var(--theme-radius-xl);
}

.settings-fieldset > .settings-toggle-wrap:only-of-type {
    border-radius: var(--theme-radius-xl);
}

/* General tab checkbox list — same 2px stack + row fill as toggle rows */
.settings-fieldset.settings-toggle-grid {
    gap: 2px;
}

.settings-fieldset.settings-toggle-grid > .degoog-checkbox-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    padding: 17px;
    border: none;
    border-radius: var(--theme-radius-xs);
    background: var(--lg-settings-row-bg);
    cursor: pointer;
}

.settings-fieldset.settings-toggle-grid > .degoog-checkbox-wrap:first-of-type {
    border-start-start-radius: var(--theme-radius-xl);
    border-start-end-radius: var(--theme-radius-xl);
}

.settings-fieldset.settings-toggle-grid > .degoog-checkbox-wrap:last-of-type {
    border-end-start-radius: var(--theme-radius-xl);
    border-end-end-radius: var(--theme-radius-xl);
}

.settings-fieldset.settings-toggle-grid > .degoog-checkbox-wrap:only-of-type {
    border-radius: var(--theme-radius-xl);
}

.settings-fieldset.settings-toggle-grid > .degoog-checkbox-wrap:hover {
    background: var(--bg-hover);
}

[data-theme="light"]
    .settings-fieldset.settings-toggle-grid
    > .degoog-checkbox-wrap {
    background: white;
}

.settings-fieldset-inverse {
    padding: 0;
}

/* Server / General settings: drop core inverse inset panels; use flat rows + bordered inputs. */
.settings-page .settings-section:not(#indexer-tab-section) .settings-fieldset-inverse {
    background: none;
    padding: 0;
    border-radius: 0;
    cursor: default;
}

.settings-page
    .settings-section:not(#indexer-tab-section)
    .settings-fieldset-inverse
    .settings-toggle-wrap {
    background: var(--lg-settings-row-bg);
}

[data-theme="light"]
    .settings-page
    .settings-section:not(#indexer-tab-section)
    .settings-fieldset-inverse
    .settings-toggle-wrap {
    background: #ffffff;
}

.settings-page
    .settings-section:not(#indexer-tab-section)
    :is(
        input.degoog-input:not([type="checkbox"]),
        textarea.degoog-input,
        select.degoog-input
    ) {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: var(--theme-radius-lg);
    background: var(--bg-light);
    color: var(--text-primary);
    font-size: 0.875rem;
    outline: none;
}

.settings-page
    .settings-section:not(#indexer-tab-section)
    input.degoog-input:not([type="checkbox"]) {
    min-height: 3rem;
    border-radius: var(--theme-radius-pill);
}

.settings-page
    .settings-section:not(#indexer-tab-section)
    textarea.degoog-input {
    min-height: 6.5rem;
    resize: vertical;
    line-height: 1.45;
}

.settings-page
    .settings-section:not(#indexer-tab-section)
    .settings-honeypot-ban-row
    .degoog-input {
    width: auto;
    flex: 1;
    min-width: 0;
}

.settings-page
    .settings-section:not(#indexer-tab-section)
    :is(
        input.degoog-input:not([type="checkbox"]),
        textarea.degoog-input,
        select.degoog-input
    ):hover {
    border-color: var(--border);
    background: var(--bg-hover);
}

.settings-page
    .settings-section:not(#indexer-tab-section)
    :is(
        input.degoog-input:not([type="checkbox"]),
        textarea.degoog-input,
        select.degoog-input
    ):focus {
    border-color: var(--primary);
    outline: 2px solid color-mix(in srgb, var(--primary) 22%, transparent);
    outline-offset: 0;
}

[data-theme="light"]
    .settings-page
    .settings-section:not(#indexer-tab-section)
    :is(
        input.degoog-input:not([type="checkbox"]),
        textarea.degoog-input,
        select.degoog-input
    ) {
    background: #ffffff;
}

[data-theme="light"]
    .settings-page
    .settings-section:not(#indexer-tab-section)
    :is(
        input.degoog-input:not([type="checkbox"]),
        textarea.degoog-input,
        select.degoog-input
    ):hover {
    background: #ffffff;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]):not([data-theme="light"])
        .settings-page
        .settings-section:not(#indexer-tab-section)
        .settings-fieldset-inverse
        .settings-toggle-wrap {
        background: #ffffff;
    }

    :root:not([data-theme="dark"]):not([data-theme="light"])
        .settings-page
        .settings-section:not(#indexer-tab-section)
        :is(
            input.degoog-input:not([type="checkbox"]),
            textarea.degoog-input,
            select.degoog-input
        ) {
        background: #ffffff;
    }

    :root:not([data-theme="dark"]):not([data-theme="light"])
        .settings-page
        .settings-section:not(#indexer-tab-section)
        :is(
            input.degoog-input:not([type="checkbox"]),
            textarea.degoog-input,
            select.degoog-input
        ):hover {
        background: #ffffff;
    }
}

/* ── Indexer settings tab ───────────────────────────────────────────────── */
#indexer-tab-section > .settings-fieldset,
#indexer-tab-section .settings-fieldset.settings-fieldset {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    border: none;
}

#indexer-tab-section .settings-fieldset-inverse {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
}

#indexer-tab-section .settings-rate-limit-defaults {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
}

#indexer-tab-section .settings-fieldset-inverse > .settings-toggle-wrap.degoog-toggle-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
    gap: 0.75rem;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 17px;
    border: none;
    border-radius: var(--theme-radius-xl);
    background: var(--lg-settings-row-bg);
    cursor: pointer;
}

#indexer-tab-section
    .settings-fieldset-inverse
    > .settings-toggle-wrap.degoog-toggle-wrap
    + .settings-desc {
    margin: 0.35rem 0 0;
    padding-inline: 0.15rem;
}

#indexer-tab-section
    .settings-fieldset-inverse
    > .settings-desc
    + .settings-toggle-wrap.degoog-toggle-wrap {
    margin-top: 0.75rem;
}

[data-theme="light"]
    #indexer-tab-section
    .settings-fieldset-inverse
    > .settings-toggle-wrap.degoog-toggle-wrap {
    background: #ffffff;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]):not([data-theme="light"])
        #indexer-tab-section
        .settings-fieldset-inverse
        > .settings-toggle-wrap.degoog-toggle-wrap {
        background: #ffffff;
    }
}

/* Google-like settings inputs inside indexer panels. */
#indexer-tab-section textarea.degoog-input,
#indexer-tab-section input.degoog-input.settings-rate-limit-input,
#indexer-tab-section input.degoog-input.settings-proxy-urls,
#indexer-tab-section .settings-proxy-urls.degoog-input {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: var(--theme-radius-lg);
    background: var(--btn-bg);
    color: var(--text-primary);
    font-size: 0.875rem;
    outline: none;
}

#indexer-tab-section input.degoog-input.settings-rate-limit-input,
#indexer-tab-section input[type="number"].degoog-input {
    min-height: 3rem;
    border-radius: var(--theme-radius-pill);
}

#indexer-tab-section textarea.degoog-input {
    min-height: 6.5rem;
    resize: vertical;
    line-height: 1.45;
}

#indexer-tab-section textarea.degoog-input:hover,
#indexer-tab-section input.degoog-input.settings-rate-limit-input:hover,
#indexer-tab-section input.degoog-input.settings-proxy-urls:hover,
#indexer-tab-section .settings-proxy-urls.degoog-input:hover {
    background: var(--bg-hover);
    border-color: var(--border);
}

#indexer-tab-section textarea.degoog-input:focus,
#indexer-tab-section input.degoog-input.settings-rate-limit-input:focus,
#indexer-tab-section input.degoog-input.settings-proxy-urls:focus,
#indexer-tab-section .settings-proxy-urls.degoog-input:focus {
    border-color: var(--primary);
    outline: 2px solid color-mix(in srgb, var(--primary) 22%, transparent);
    outline-offset: 0;
}

:root:not([data-theme="dark"])
    #indexer-tab-section
    :is(
        textarea.degoog-input,
        input.degoog-input.settings-rate-limit-input,
        input.degoog-input.settings-proxy-urls,
        .settings-proxy-urls.degoog-input
    ) {
    background: var(--lg-settings-select-light);
}

:root:not([data-theme="dark"])
    #indexer-tab-section
    :is(
        textarea.degoog-input,
        input.degoog-input.settings-rate-limit-input,
        input.degoog-input.settings-proxy-urls,
        .settings-proxy-urls.degoog-input
    ):hover {
    background: var(--lg-settings-select-light-hover);
}

/* Index stats — compact pill table + per-type chips (stats block only). */
#indexer-tab-section #indexer-stats-wrap.degoog-indexer-stats {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
}

#indexer-tab-section #indexer-stats-wrap .degoog-stat-grid:not(.degoog-stat-grid--types) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0;
    width: min(100%, 22rem);
    margin: 0;
    padding: 0.35rem 0;
    border: 1px solid var(--border-light);
    border-radius: var(--theme-radius-lg);
    background: var(--lg-sidebar-row-surface);
    overflow: hidden;
}

#indexer-tab-section #indexer-stats-wrap .degoog-stat-grid:not(.degoog-stat-grid--types) > div {
    display: contents;
}

#indexer-tab-section #indexer-stats-wrap .degoog-stat-grid:not(.degoog-stat-grid--types) dt,
#indexer-tab-section #indexer-stats-wrap .degoog-stat-grid:not(.degoog-stat-grid--types) dd {
    margin: 0;
    padding: 0.45rem 0.85rem;
    border-block-start: 1px solid var(--border-light);
}

#indexer-tab-section
    #indexer-stats-wrap
    .degoog-stat-grid:not(.degoog-stat-grid--types)
    > div:first-child
    dt,
#indexer-tab-section
    #indexer-stats-wrap
    .degoog-stat-grid:not(.degoog-stat-grid--types)
    > div:first-child
    dd {
    border-block-start: none;
}

#indexer-tab-section #indexer-stats-wrap .degoog-stat-grid:not(.degoog-stat-grid--types) dt {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
}

#indexer-tab-section #indexer-stats-wrap .degoog-stat-grid:not(.degoog-stat-grid--types) dd {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-primary);
    text-align: end;
    font-variant-numeric: tabular-nums;
}

#indexer-tab-section #indexer-stats-wrap .degoog-stat-grid--types {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
}

#indexer-tab-section #indexer-stats-wrap .degoog-stat-grid--types > div {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--border-light);
    border-radius: var(--theme-radius-pill);
    background: var(--lg-sidebar-row-surface);
}

#indexer-tab-section #indexer-stats-wrap .degoog-stat-grid--types dt {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: lowercase;
}

#indexer-tab-section #indexer-stats-wrap .degoog-stat-grid--types dd {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

#indexer-tab-section #indexer-stats-wrap .degoog-stat-grid--types:empty {
    display: none;
}

[data-theme="light"] #indexer-tab-section #indexer-stats-wrap .degoog-stat-grid:not(.degoog-stat-grid--types) {
    background: #ffffff;
}

[data-theme="light"] #indexer-tab-section #indexer-stats-wrap .degoog-stat-grid--types > div {
    background: #ffffff;
}

#indexer-tab-section .degoog-action-row--buttons {
    gap: 0.5rem;
    margin-top: 0.25rem;
}

#indexer-tab-section #indexer-action-status.settings-desc {
    margin: 0;
}

.settings-toggle-wrap:not(.settings-desc) {
    flex-direction: row-reverse;
    justify-content: space-between;
}

.settings-toggle-wrap {
    background: var(--lg-settings-row-bg);
    padding: 17px;
    border: none;
}

.settings-toggle-wrap.settings-desc {
    border-radius: var(--theme-radius-xl);
    cursor: default;
}

.settings-toggle-wrap.settings-desc .settings-desc {
    margin-bottom: 0;
}

[data-theme="light"] .store-updates-row,
[data-theme="light"] .settings-toggle-wrap,
[data-theme="light"] .ext-card:not(.settings-section):not(.settings-desc),
[data-theme="light"] .store-repo-detail,
[data-theme="light"] .store-repo-detail .store-repo-img,
[data-theme="light"] .store-card {
    background: #ffffff;
}

/* Repositories block is a settings section, not a card — match dark (no panel chrome). */
[data-theme="light"] .store-repos-section.settings-section.degoog-panel {
    background: none;
    box-shadow: none;
    border-color: transparent;
    padding: 0;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]):not([data-theme="light"]) .store-updates-row,
    :root:not([data-theme="dark"]):not([data-theme="light"]) .settings-toggle-wrap,
    :root:not([data-theme="dark"]):not([data-theme="light"])
        .ext-card:not(.settings-section):not(.settings-desc),
    :root:not([data-theme="dark"]):not([data-theme="light"]) .store-repo-detail,
    :root:not([data-theme="dark"]):not([data-theme="light"]) .store-repo-detail .store-repo-img,
    :root:not([data-theme="dark"]):not([data-theme="light"]) .store-card {
        background: #ffffff;
    }

    :root:not([data-theme="dark"]):not([data-theme="light"])
        .store-repos-section.settings-section.degoog-panel {
        background: none;
        box-shadow: none;
        border-color: transparent;
        padding: 0;
    }
}

.ext-card-configure,
.ext-card-apply {
    background: var(--lg-settings-chip-btn-bg) !important;
    border-radius: var(--theme-radius-pill);
    border: 1px solid var(--border) !important;
    color: var(--text-secondary) !important;
}

[data-theme="light"] .ext-card-configure,
[data-theme="light"] .ext-card-apply {
    color: var(--text-secondary) !important;
    background: var(--lg-settings-chip-btn-bg-light) !important;
}

[data-theme="dark"] .ext-card-configure:hover,
[data-theme="dark"] .ext-card-apply:hover {
    color: white;
}

/* Configure modal — engines, plugins, transports, themes. */
.ext-modal {
    border-radius: var(--theme-radius-xl);
    background: var(--bg-light);
}

[data-theme="light"] .ext-modal {
    background: white;
}

.ext-modal-title {
    font-weight: 500;
}

.ext-modal-footer .settings-save {
    border-radius: var(--theme-radius-pill);
    padding: 0.625rem 1.75rem;
}

.ext-modal-footer .btn--secondary,
.ext-modal-footer .degoog-btn--secondary {
    background: var(--btn-bg) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--theme-radius-pill);
    color: var(--text-secondary) !important;
}

.ext-modal-footer .btn--secondary:hover,
.ext-modal-footer .degoog-btn--secondary:hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

.ext-modal-body input.ext-field-input.degoog-input:not([type="checkbox"]),
.ext-modal-body textarea.ext-field-input.degoog-input,
.ext-modal-body select.ext-field-input.degoog-input,
.ext-modal-body .ext-field-urllist-input.degoog-input {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 15px;
    border: 1px solid var(--border) !important;
    border-radius: var(--theme-radius-lg);
    background: var(--btn-bg) !important;
    color: var(--text-primary);
    font-size: 0.875rem;
    outline: none;
    box-shadow: none !important;
}

.ext-modal-body input.ext-field-input.degoog-input[type="number"],
.ext-modal-body input.ext-field-input.degoog-input[type="text"],
.ext-modal-body input.ext-field-input.degoog-input[type="url"],
.ext-modal-body input.ext-field-input.degoog-input[type="password"],
.ext-modal-body select.ext-field-input.degoog-input {
    min-height: 3rem;
    border-radius: var(--theme-radius-pill);
}

.ext-modal-body textarea.ext-field-input.degoog-input {
    min-height: 6.5rem;
    resize: vertical;
    line-height: 1.45;
}

.ext-modal-body input.ext-field-input.degoog-input:not([type="checkbox"]):hover,
.ext-modal-body textarea.ext-field-input.degoog-input:hover,
.ext-modal-body select.ext-field-input.degoog-input:hover,
.ext-modal-body .ext-field-urllist-input.degoog-input:hover {
    background: var(--bg-hover) !important;
    border-color: var(--border) !important;
}

.ext-modal-body input.ext-field-input.degoog-input:not([type="checkbox"]):focus,
.ext-modal-body textarea.ext-field-input.degoog-input:focus,
.ext-modal-body select.ext-field-input.degoog-input:focus,
.ext-modal-body .ext-field-urllist-input.degoog-input:focus {
    border-color: var(--primary) !important;
    outline: 2px solid color-mix(in srgb, var(--primary) 22%, transparent);
    outline-offset: 0;
}

:root:not([data-theme="dark"])
    .ext-modal-body
    :is(
        input.ext-field-input.degoog-input:not([type="checkbox"]),
        textarea.ext-field-input.degoog-input,
        select.ext-field-input.degoog-input,
        .ext-field-urllist-input.degoog-input
    ) {
    background: var(--lg-settings-select-light) !important;
}

:root:not([data-theme="dark"])
    .ext-modal-body
    :is(
        input.ext-field-input.degoog-input:not([type="checkbox"]),
        textarea.ext-field-input.degoog-input,
        select.ext-field-input.degoog-input,
        .ext-field-urllist-input.degoog-input
    ):hover {
    background: var(--lg-settings-select-light-hover) !important;
}

.ext-modal-body .ext-field-toggle-row {
    background: var(--lg-settings-row-bg);
    padding: 17px;
    border-radius: var(--theme-radius-xl);
}

.ext-modal-body .ext-field-toggle-row .ext-field-label {
    text-transform: none;
    letter-spacing: normal;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--text-primary);
    margin: 0;
}

[data-theme="light"] .ext-modal-body .ext-field-toggle-row {
    background: white;
}

.ext-modal-body .ext-field[data-type="toggle"] .ext-field-desc {
    margin-top: 0.5rem;
    padding-inline: 2px;
}

.ext-modal-body .ext-advanced-section {
    margin-top: 0;
    padding-top: 0;
}

.ext-modal-body .ext-advanced-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 0.75rem;
}

.ext-modal-body .ext-advanced-body .ext-field {
    margin-bottom: 0;
}

.ext-modal-body .ext-list-row {
    background: var(--lg-settings-row-bg);
    border-radius: var(--theme-radius-lg);
    padding: 0.75rem 1rem;
}

[data-theme="light"] .ext-modal-body .ext-list-row {
    background: white;
}

.ext-modal-body .ext-test-btn {
    border-radius: var(--theme-radius-pill);
    background: var(--btn-bg);
    padding: 0.5rem 1rem;
}

.ext-modal-body .ext-test-btn:hover:not(:disabled) {
    background: var(--bg-hover);
    border-color: var(--border);
    color: var(--text-primary);
}

.ext-modal-body .ext-field-urllist-add-btn {
    border-radius: var(--theme-radius-pill);
}

.theme-select,
select.settings-server-preset-select,
.settings-server-preset-select.degoog-input {
    appearance: none;
    -webkit-appearance: none;
    background: var(--btn-bg);
    border-radius: var(--theme-radius-pill);
    padding: 15px;
    padding-inline-end: 2.5rem;
    border: 1px solid var(--border);
    color: var(--text-primary);
    cursor: pointer;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}

.theme-select:hover,
select.settings-server-preset-select:hover,
.settings-server-preset-select.degoog-input:hover {
    background: var(--bg-hover);
    border-color: var(--border);
}

:root:not([data-theme="dark"]) .theme-select,
:root:not([data-theme="dark"]) select.settings-server-preset-select,
:root:not([data-theme="dark"]) .settings-server-preset-select.degoog-input {
    background: var(--lg-settings-select-light);
}

:root:not([data-theme="dark"]) .theme-select:hover,
:root:not([data-theme="dark"]) select.settings-server-preset-select:hover,
:root:not([data-theme="dark"]) .settings-server-preset-select.degoog-input:hover {
    background: var(--lg-settings-select-light-hover);
}

.store-updates-toggle {
    padding: 0;
}

.store-updates-header {
    padding: 0.75rem 1rem;
}

.store-updates-panel {
    border-radius: var(--theme-radius-search);
}

/* Store catalog: same as degoog core (style_002) — use semantic vars only, no theme-local store-* tokens. */
.store-repo-detail {
    border-radius: var(--theme-radius-xl);
    background: var(--bg-light);
    color: var(--text-primary);
}

.store-repo-detail .store-repo-img {
    background: var(--bg-light);
}

.store-repo-img {
    border-radius: var(--theme-radius-pill);
}

.store-search-input {
    appearance: none;
    -webkit-appearance: none;
    background: var(--search-bar-bg);
    border-radius: var(--theme-radius-pill);
    border: 1px solid transparent;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    color: var(--text-primary);
    font-size: 0.875rem;
    outline: none;
    padding: 0.75rem 1rem;
}

.store-search-input:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.store-search-input::placeholder {
    color: var(--text-secondary);
    opacity: 1;
}

.store-filter-select {
    border-radius: var(--theme-radius-pill);
}

/* Store search + filter dropdowns — light mode only (match settings extension search). */
[data-theme="light"] .store-search-input,
[data-theme="light"] .store-filter-bar > .degoog-search-bar.degoog-search-bar--square-advanced {
    background: var(--bg);
    border: 1px solid var(--border);
    box-shadow: var(--lg-search-shadow);
}

[data-theme="light"] .store-search-input:hover,
[data-theme="light"]
    .store-filter-bar
    > .degoog-search-bar.degoog-search-bar--square-advanced:hover,
[data-theme="light"] .store-search-input:focus,
[data-theme="light"]
    .store-filter-bar
    > .degoog-search-bar.degoog-search-bar--square-advanced:focus {
    background: var(--search-bar-focused);
    box-shadow: var(--lg-search-shadow-hover);
}

[data-theme="light"] .store-filter-select {
    background-color: #ffffff;
    border: 1px solid var(--border);
    box-shadow: var(--lg-search-shadow);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]):not([data-theme="light"]) .store-search-input,
    :root:not([data-theme="dark"]):not([data-theme="light"])
        .store-filter-bar
        > .degoog-search-bar.degoog-search-bar--square-advanced {
        background: var(--bg);
        border: 1px solid var(--border);
        box-shadow: var(--lg-search-shadow);
    }

    :root:not([data-theme="dark"]):not([data-theme="light"]) .store-search-input:hover,
    :root:not([data-theme="dark"]):not([data-theme="light"])
        .store-filter-bar
        > .degoog-search-bar.degoog-search-bar--square-advanced:hover,
    :root:not([data-theme="dark"]):not([data-theme="light"]) .store-search-input:focus,
    :root:not([data-theme="dark"]):not([data-theme="light"])
        .store-filter-bar
        > .degoog-search-bar.degoog-search-bar--square-advanced:focus {
        background: var(--search-bar-focused);
        box-shadow: var(--lg-search-shadow-hover);
    }

    :root:not([data-theme="dark"]):not([data-theme="light"]) .store-filter-select {
        background-color: #ffffff;
        border: 1px solid var(--border);
        box-shadow: var(--lg-search-shadow);
    }
}

.apps-pocket-panel {
    border-radius: var(--theme-radius-xl) !important;
}

[data-theme="light"] .apps-pocket-panel {
    background: var(--lg-settings-apps-pocket-bg);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

/* ══════════════════════════════════════════════════════════════════════════
   MEDIA PREVIEW BAR
   Custom header bar inside #media-preview-panel: favicon, domain, nav,
   more-menu, close. Scoped to .mp2-* to avoid collisions with degoog core.
   ══════════════════════════════════════════════════════════════════════════ */

/* Prevent the panel itself from scrolling so .mp2-bar stays pinned.
   Degoog's core sets overflow-y: auto on the panel, which breaks
   sticky child behaviour in most browsers. We move scrolling to
   .mp2-body instead, keeping the bar as a plain flex-shrink-0 header. */
#media-preview-panel {
    --mp2-panel-width: min(30rem, calc(100vw - 2rem));
    --mp2-panel-chrome: var(--lg-chrome-surface);
    --mp2-panel-bg: var(--bg);
    --mp2-panel-border: var(--border-light);
    --mp2-panel-shadow: 0 1px 2px color-mix(in srgb, var(--text-primary) 8%, transparent);
    display: none;
    flex-direction: column;
    min-width: 0;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin !important;
    background: var(--mp2-panel-bg);
    border: 1px solid var(--mp2-panel-border);
    border-top: 1px solid var(--mp2-panel-border);
    border-radius: var(--theme-radius-xl) var(--theme-radius-xl) 0 0;
    box-shadow: var(--mp2-panel-shadow);
}

#results-page:has(#results-layout.media-mode) #media-preview-panel.open,
#results-page:has(#results-layout.media-mode) #media-preview-panel,
#media-preview-panel.open,
#media-preview-panel {
    background-color: var(--mp2-panel-bg);
}

#media-preview-panel:not(.open):not(.lg-preview-closing) {
    display: none;
}

#media-preview-panel.open,
#media-preview-panel.lg-preview-closing {
    display: flex;
}

@keyframes lg-preview-panel-fade-out {
    from {
        opacity: 1;
        visibility: visible;
    }

    to {
        opacity: 0;
        visibility: visible;
    }
}

@keyframes lg-preview-content-fade-out {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateY(0.5rem) scale(0.99);
    }
}

#results-page:has(#results-layout.media-mode) #media-preview-panel {
    display: flex;
    width: 100%;
    max-height: min(78vh, 48rem);
    pointer-events: none;
    transform: translateY(calc(100% + 1rem)) scale(0.985);
    transform-origin: center bottom;
    transition:
        transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 220ms ease,
        visibility 0s linear 320ms,
        box-shadow 220ms ease,
        border-color 220ms ease,
        background-color 220ms ease;
}

#results-page:has(#results-layout.media-mode)
    #media-preview-panel:not(.open):not(.lg-preview-closing) {
    opacity: 0;
    visibility: hidden;
}

#results-page:has(#results-layout.media-mode) #media-preview-panel.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    transition-delay: 0s;
}

#results-page:has(#results-layout.media-mode) #media-preview-panel.open.lg-preview-opening {
    transition: none;
}

/* Sticky preview sits below our sticky header (50px bar + 0.75rem pad × 2).
   Do not set `overflow-x: hidden` on `#results-layout` in video mode — it breaks
   sticky; clip the grid column on `#results-main` instead. */
@media (min-width: 768px) {
    #results-page:has(#results-layout.media-mode) #media-preview-panel {
        overflow: hidden !important;
        scrollbar-gutter: auto;
        top: var(
            --literallygoogle-sticky-header-offset,
            calc(50px + 1.5rem)
        );
        align-self: start;
        left: auto;
        right: auto;
        bottom: auto;
        height: calc(
            100vh -
                var(
                    --literallygoogle-sticky-header-offset,
                    calc(50px + 1.5rem)
                )
        );
        max-height: calc(
            100vh -
                var(
                    --literallygoogle-sticky-header-offset,
                    calc(50px + 1.5rem)
                )
        );
        position: sticky;
        flex: 0 0 0;
        width: 0;
        min-width: 0;
        max-width: 0;
        margin-inline: 0;
        border-radius: var(--theme-radius-xl);
        transform: translateX(1.6rem) scale(0.975);
        transform-origin: right center;
        box-shadow: none;
        transition:
            flex-basis 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
            width 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
            max-width 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
            min-width 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
            transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
            opacity 220ms ease,
            visibility 0s linear 320ms,
            box-shadow 220ms ease,
            border-color 220ms ease,
            background-color 220ms ease;
    }

    html[dir="rtl"] #results-page:has(#results-layout.media-mode) #media-preview-panel {
        transform: translateX(-1.6rem) scale(0.975);
        transform-origin: left center;
    }

    #results-page:has(#results-layout.media-mode) #media-preview-panel.open {
        flex-basis: var(--mp2-panel-width);
        width: var(--mp2-panel-width);
        min-width: 0;
        max-width: var(--mp2-panel-width);
        border-top: 1px solid var(--mp2-panel-border);
        box-shadow: var(--mp2-panel-shadow);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(0) scale(1);
        overflow: hidden;
    }

    #results-page:has(#results-layout.media-mode) #media-preview-panel.open .mp2-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: color-mix(in srgb, var(--text-secondary) 45%, transparent) transparent;
        border-end-end-radius: var(--theme-radius-xl);
        border-end-start-radius: var(--theme-radius-xl);
        padding-inline-end: 0.15rem;
    }

    #results-page:has(#results-layout.media-mode) #media-preview-panel.open .mp2-body::-webkit-scrollbar {
        width: 0.5rem;
    }

    #results-page:has(#results-layout.media-mode) #media-preview-panel.open .mp2-body::-webkit-scrollbar-track {
        margin-block: 0.35rem;
        margin-inline-end: 0.2rem;
        background: transparent;
    }

    #results-page:has(#results-layout.media-mode) #media-preview-panel.open .mp2-body::-webkit-scrollbar-thumb {
        border: 0.125rem solid transparent;
        border-radius: 100px;
        background: color-mix(in srgb, var(--text-secondary) 42%, transparent);
        background-clip: padding-box;
    }

    #results-page:has(#results-layout.media-mode) #media-preview-panel.open .mp2-bar {
        border-start-start-radius: var(--theme-radius-xl);
        border-start-end-radius: var(--theme-radius-xl);
    }

    #results-page:has(#results-layout.media-mode) #media-preview-panel.lg-preview-closing {
        position: fixed;
        top: var(--lg-preview-exit-top, 0px);
        left: var(--lg-preview-exit-left, 0px);
        right: auto;
        bottom: auto;
        width: var(--lg-preview-exit-width, var(--mp2-panel-width));
        min-width: 0;
        max-width: var(--lg-preview-exit-width, var(--mp2-panel-width));
        height: var(--lg-preview-exit-height, auto);
        max-height: var(--lg-preview-exit-height, auto);
        flex-basis: auto;
        margin: 0;
        z-index: 30;
        pointer-events: none;
        opacity: 1;
        visibility: visible;
        animation: lg-preview-panel-fade-out-desktop 280ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    }

    #results-page:has(#results-layout.media-mode) #media-preview-panel.lg-preview-closing .mp2-bar,
    #results-page:has(#results-layout.media-mode) #media-preview-panel.lg-preview-closing .mp2-body {
        animation: lg-preview-content-fade-out-desktop 240ms ease forwards;
    }

    html[dir="rtl"] #results-page:has(#results-layout.media-mode) #media-preview-panel.lg-preview-closing {
        animation: lg-preview-panel-fade-out-desktop-rtl 280ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    }

    @keyframes lg-preview-panel-fade-out-desktop {
        from {
            opacity: 1;
            transform: translateX(0) scale(1);
            visibility: visible;
        }
        to {
            opacity: 0;
            transform: translateX(4rem) scale(0.95);
            visibility: visible;
        }
    }

    @keyframes lg-preview-panel-fade-out-desktop-rtl {
        from {
            opacity: 1;
            transform: translateX(0) scale(1);
            visibility: visible;
        }
        to {
            opacity: 0;
            transform: translateX(-4rem) scale(0.95);
            visibility: visible;
        }
    }

    @keyframes lg-preview-content-fade-out-desktop {
        from {
            opacity: 1;
        }
        to {
            opacity: 0;
        }
    }

    #results-page:has(#results-layout.media-mode)
        #media-preview-panel:not(.open) {
        border-color: transparent;
        box-shadow: none;
    }

    /* Closed docked preview must leave the flex row entirely — width:0 still
       consumes --literallygoogle-media-row-gap and nudges the grid inward. */
    #results-page:has(#results-layout.media-mode)
        #media-preview-panel:not(.open):not(.lg-preview-closing) {
        display: none;
        flex: 0 0 0;
        width: 0;
        min-width: 0;
        max-width: 0;
        margin: 0;
        padding: 0;
        border-width: 0;
        overflow: hidden;
    }
}

.mp2-bar {
    flex-shrink: 0;
    z-index: 10;
    position: sticky;
    top: 0;
    background: var(--mp2-panel-chrome);
    display: flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.65rem 0.55rem 0.55rem 0.7rem;
    border-bottom: 1px solid var(--mp2-panel-border);
    min-height: 2.65rem;
}

.mp2-body {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    width: 100%;
    padding: 0.8rem 0 0.8rem 0;
    background: var(--mp2-panel-bg);
}

.mp2-site {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.mp2-favicon-bg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 3px;
    box-sizing: border-box;
    border-radius: 999px;
    flex-shrink: 0;
    overflow: hidden;
    background: color-mix(in srgb, var(--bg) 74%, var(--white) 26%);
    border: 1px solid color-mix(in srgb, var(--border-light) 70%, transparent);
}

[data-theme="light"] .mp2-favicon-bg {
    background: color-mix(in srgb, var(--bg-hover) 82%, white 18%);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .mp2-favicon-bg {
        background: color-mix(in srgb, var(--bg-hover) 82%, white 18%);
    }
}

.mp2-favicon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.mp2-favicon.mp2-favicon--fill {
    object-fit: cover;
}

.mp2-host {
    font-size: 0.8rem;
    color: var(--text-primary);
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    text-decoration: none;
}

.mp2-host:hover {
    color: var(--text-link);
    text-decoration: underline;
}

.mp2-controls {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    flex-shrink: 0;
}

.mp2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border: 1px solid transparent;
    border-radius: var(--theme-radius-pill);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition:
        background 120ms ease,
        color 120ms ease,
        border-color 120ms ease,
        transform 120ms ease;
}

.mp2-btn:hover {
    background: color-mix(in srgb, var(--bg-hover) 80%, transparent);
    border-color: color-mix(in srgb, var(--border-light) 75%, transparent);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.mp2-btn:disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

.mp2-menu-wrap {
    position: relative;
}

.mp2-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 9.5rem;
    background: var(--mp2-panel-chrome);
    border: 1px solid var(--mp2-panel-border);
    border-radius: var(--theme-radius-md);
    padding: 0.3rem;
    box-shadow: 0 10px 26px color-mix(in srgb, var(--text-primary) 14%, transparent);
    z-index: 30;
}

.mp2-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.7rem;
    border: none;
    border-radius: var(--theme-radius-pill);
    background: transparent;
    color: var(--text-primary);
    font-size: 0.88rem;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    transition: background 100ms ease;
}

/* Author `display: flex` beats UA `[hidden]`; keep menu items actually hidden. */
button.mp2-item[hidden] {
    display: none;
}

.mp2-item:hover {
    background: color-mix(in srgb, var(--bg-hover) 75%, transparent);
}

/* RTL: flip the prev/next chevrons so ‹ › become › ‹ */
.media-preview-img-wrap {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    margin-inline: auto;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
    box-sizing: border-box;
    cursor: zoom-in;
}

.media-preview-img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: min(62vh, 35rem);
    object-fit: contain;
    background: transparent;
    padding: 0;
    border-radius: 0;
    cursor: inherit;
}

#img-lightbox[hidden] {
    display: none !important;
}

#img-lightbox {
    position: fixed;
    inset: 0;
    z-index: 50000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
}

#img-lightbox.open {
    opacity: 1;
    pointer-events: auto;
}

.lg-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top, rgba(255, 255, 255, 0.08), transparent 45%),
        rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(18px) saturate(90%);
    -webkit-backdrop-filter: blur(18px) saturate(90%);
}

.lg-lightbox-shell {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(96vw, 120rem);
    height: min(96vh, 72rem);
    padding: clamp(0.75rem, 2vw, 1.5rem);
}

.lg-lightbox-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: clamp(1rem, 2vw, 1.5rem);
    cursor: zoom-in;
}

.lg-lightbox-stage[data-cursor-mode="zoom-out"] {
    cursor: zoom-out;
}

.lg-lightbox-img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    transform-origin: 50% 50%;
    transition: transform 180ms ease;
    will-change: transform, transform-origin;
}

.lg-lightbox-close {
    position: absolute;
    top: clamp(0.9rem, 2vw, 1.25rem);
    right: clamp(0.9rem, 2vw, 1.25rem);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-light) 90%, transparent);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 1.15rem;
    font-weight: 500;
    line-height: 1;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.18),
        0 4px 14px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(14px) saturate(130%);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    transition:
        transform 120ms ease,
        background 120ms ease,
        border-color 120ms ease,
        box-shadow 120ms ease;
}

.lg-lightbox-close:hover,
.lg-lightbox-close:focus-visible {
    background: color-mix(in srgb, var(--bg-hover) 94%, transparent);
    border-color: color-mix(in srgb, var(--primary) 48%, var(--border));
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.22),
        0 8px 20px rgba(var(--primary-rgb), 0.2);
    transform: scale(1.03);
}

.lg-lightbox-status {
    position: absolute;
    left: 50%;
    bottom: clamp(1rem, 2vw, 1.5rem);
    z-index: 2;
    transform: translateX(-50%);
    padding: 0.45rem 0.8rem;
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-light) 88%, transparent);
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.18),
        0 8px 20px rgba(0, 0, 0, 0.16);
    backdrop-filter: blur(14px) saturate(125%);
    -webkit-backdrop-filter: blur(14px) saturate(125%);
}

#results-page.lg-lightbox-open #lg-image-tools-fab {
    z-index: 200 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.media-preview-info {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 0.8rem;
    width: 100%;
    align-self: stretch;
    padding: 0.1rem 0.5rem 0.25rem;
}

.media-preview-title {
    margin: 0;
    padding-inline: 0.5rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.4;
}

.media-preview-link {
    margin: -0.25rem 0 0;
    padding-inline: 0.5rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
    text-decoration: none;
    display: block;
}

.media-preview-link:hover {
    color: var(--text-link);
    text-decoration: underline;
}

.media-preview-engines {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding-inline: 0.5rem;
}

.media-preview-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding: 0.1rem 0.5rem 0;
}

.media-preview-more {
    flex: 0 0 auto;
    width: 100%;
    align-self: stretch;
    padding: 0.1rem 0.5rem clamp(0.75rem, 3vw, 1.25rem);
}

.media-preview-more:empty {
    display: none;
}

.media-preview-more-grid {
    column-count: 3;
    column-gap: 0.25rem;
    width: 100%;
}

.media-preview-more-item {
    display: block;
    width: 100%;
    margin: 0 0 0.25rem;
    padding: 0;
    break-inside: avoid;
    overflow: hidden;
    background: color-mix(in srgb, var(--lg-chrome-surface) 82%, var(--bg) 18%);
    border: 1px solid color-mix(in srgb, var(--border-light) 70%, transparent);
    border-radius: var(--theme-radius-md);
    cursor: pointer;
    transition:
        border-color 120ms ease,
        opacity 120ms ease,
        transform 120ms ease;
}

.media-preview-more-item:hover {
    border-color: color-mix(in srgb, var(--text-secondary) 32%, transparent);
    opacity: 0.9;
    transform: translateY(-1px);
}

.media-preview-more-img {
    display: block;
    width: 100%;
    height: auto;
}

.media-preview-visit,
.media-preview-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.3rem;
    padding: 0.5rem 0.95rem;
    border-radius: var(--theme-radius-pill);
    text-decoration: none;
    font-weight: 500;
}

.media-preview-visit {
    background: var(--primary);
    border: 1px solid transparent;
    color: var(--white);
}

.media-preview-visit:hover {
    background: var(--primary-hover);
    color: var(--white);
}

.media-preview-download {
    background: color-mix(in srgb, var(--lg-chrome-surface) 82%, var(--bg) 18%);
    border: 1px solid color-mix(in srgb, var(--border-light) 75%, transparent);
    color: var(--text-primary);
}

.media-preview-download:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

#results-page:has(#results-layout.media-mode) #media-preview-panel .mp2-bar,
#results-page:has(#results-layout.media-mode) #media-preview-panel .mp2-body {
    opacity: 0;
    transform: translateY(0.7rem) scale(0.985);
    transition:
        opacity 200ms ease,
        transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

#results-page:has(#results-layout.media-mode) #media-preview-panel.open .mp2-bar,
#results-page:has(#results-layout.media-mode) #media-preview-panel.open .mp2-body {
    opacity: 1;
    transform: translateY(0) scale(1);
}

#results-page:has(#results-layout.media-mode) #media-preview-panel.open .mp2-bar {
    transition-delay: 50ms;
}

#results-page:has(#results-layout.media-mode) #media-preview-panel.open .mp2-body {
    transition-delay: 90ms;
}

#results-page:has(#results-layout.media-mode) #media-preview-panel.lg-preview-closing {
    animation: lg-preview-panel-fade-out 280ms ease forwards;
    visibility: visible;
    pointer-events: none;
}

#results-page:has(#results-layout.media-mode) #media-preview-panel.lg-preview-closing .mp2-bar,
#results-page:has(#results-layout.media-mode) #media-preview-panel.lg-preview-closing .mp2-body {
    animation: lg-preview-content-fade-out 240ms ease forwards;
}

@media (prefers-reduced-motion: reduce) {
    #img-lightbox,
    .lg-lightbox-close,
    #results-page:has(#results-layout.media-mode) #media-preview-panel,
    #results-page:has(#results-layout.media-mode) #media-preview-panel .mp2-bar,
    #results-page:has(#results-layout.media-mode) #media-preview-panel .mp2-body,
    .mp2-btn,
    .mp2-item {
        transition: none !important;
        transform: none !important;
        animation: none !important;
    }

    .lg-lightbox-img {
        transition: none !important;
        animation: none !important;
    }
}
.mp2-toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(0.6rem);
    padding: 0.55rem 1.15rem;
    background: var(--bg-light);
    border: 1px solid var(--border);
    border-radius: var(--theme-radius-pill);
    font-size: 0.85rem;
    color: var(--text-primary);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    z-index: 9999;
    transition:
        opacity 180ms ease,
        transform 180ms ease;
}

.mp2-toast.mp2-toast--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ══════════════════════════════════════════════════════════════════════════
   FOOTER
   Centered link row at the bottom of the results page.
   ══════════════════════════════════════════════════════════════════════════ */

.footer-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    max-width: var(--literallygoogle-results-layout-max);
    margin: 0 auto;
    font-size: 14px;
}

.footer-content a {
    color: var(--text-secondary);
    text-decoration: none;
}

.footer-content a:hover {
    text-decoration: underline;
}

.footer-sep {
    color: var(--text-secondary);
}

/* ── Plugin accent overrides ─────────────────────────────────────────── */
.dslot-card {
    --dslot-accent: var(--primary);
}

.trc-card {
    --trc-accent: var(--success);
}