/*
 * Shared theme layer.
 * Used by the main page and app detail pages through HeaderBenchmarkee.
 */
:root {
    --bench-theme-bg: #ffffff;
    --bench-theme-surface: #f3f3f6;
    --bench-theme-surface-strong: #e9e9ee;
    --bench-theme-text: #1d1d22;
    --bench-theme-muted: #8a8d97;
    --bench-theme-border: rgba(20, 22, 28, .08);
    --bench-theme-shadow: 0 18px 50px rgba(18, 20, 28, .08);
}

html[data-bench-theme="dark"] {
    color-scheme: dark;
    --bench-theme-bg: #0d0f14;
    --bench-theme-surface: #171a21;
    --bench-theme-surface-strong: #222631;
    --bench-theme-text: #f4f5f7;
    --bench-theme-muted: #8f95a3;
    --bench-theme-border: rgba(255, 255, 255, .08);
    --bench-theme-shadow: 0 18px 52px rgba(0, 0, 0, .35);
}

html.bench-theme-is-changing body,
html.bench-theme-is-changing #header_benchmarkee,
html.bench-theme-is-changing .main_menu_benchmarkee,
html.bench-theme-is-changing .header-auth-link,
html.bench-theme-is-changing .bench-theme-toggle__track,
html.bench-theme-is-changing .bench-theme-toggle__thumb,
html.bench-theme-is-changing .benchmark_main_info_text h1,
html.bench-theme-is-changing .benchmark_main_info_text p,
html.bench-theme-is-changing .main_info_text h1,
html.bench-theme-is-changing .main_info_text p {
    transition: background-color .18s ease, border-color .18s ease, color .18s ease !important;
}

html[data-bench-theme="dark"] body {
    background: var(--bench-theme-bg);
    color: var(--bench-theme-text);
}

html[data-bench-theme="dark"] body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 0%, rgba(83, 95, 132, .16), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, .02), transparent 260px);
    z-index: -1;
}

html[data-bench-theme="dark"] #header_benchmarkee,
html[data-bench-theme="dark"] .main_menu_benchmarkee {
    background: transparent;
}

html[data-bench-theme="dark"] .header-auth-link--secondary,
html[data-bench-theme="dark"] .bench-footer-menu a,
html[data-bench-theme="dark"] .bench-footer-menu button {
    background: var(--bench-theme-surface);
    color: var(--bench-theme-text);
    border-color: var(--bench-theme-border);
}

html[data-bench-theme="dark"] .header-auth-link--primary {
    background: #f4f5f7;
    color: #111318;
}

html[data-bench-theme="dark"] .benchmark_main_info_text h1,
html[data-bench-theme="dark"] .benchmark_main_info_text p,
html[data-bench-theme="dark"] .main_info_text h1,
html[data-bench-theme="dark"] .main_info_text p {
    color: var(--bench-theme-text);
}

/* Header theme toggle. */
.bench-theme-toggle {
    width: 58px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
}

.bench-theme-toggle__track {
    position: relative;
    width: 54px;
    height: 30px;
    display: block;
    border: 1px solid rgba(20, 22, 28, .08);
    border-radius: 999px;
    background: #eef0f5;
    box-shadow: inset 0 1px 3px rgba(18, 20, 28, .14), 0 8px 22px rgba(20, 22, 30, .08);
    overflow: hidden;
    transition: background .24s ease, border-color .24s ease, box-shadow .24s ease;
}

.bench-theme-toggle__track::before {
    display: none;
}

.bench-theme-toggle__thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 3px 8px rgba(18, 20, 28, .22);
    transform: translateX(0);
    transition: transform .24s cubic-bezier(.2, .8, .2, 1), background .24s ease, box-shadow .24s ease;
    z-index: 2;
}

.bench-theme-toggle__icon {
    position: absolute;
    top: 7px;
    width: 16px;
    height: 16px;
    color: rgba(29, 29, 34, .48);
    z-index: 1;
}

.bench-theme-toggle__icon svg {
    width: 16px;
    height: 16px;
    display: block;
}

.bench-theme-toggle__icon--sun {
    left: 7px;
}

.bench-theme-toggle__icon--moon {
    right: 7px;
    color: rgba(29, 29, 34, .46);
}

.bench-theme-toggle.is-dark .bench-theme-toggle__track {
    background: #34c759;
    border-color: rgba(255, 255, 255, .18);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .12), 0 10px 24px rgba(52, 199, 89, .18);
}

.bench-theme-toggle.is-dark .bench-theme-toggle__thumb {
    transform: translateX(24px);
    background: #fff;
    box-shadow: 0 3px 9px rgba(0, 0, 0, .22);
}

.bench-theme-toggle.is-dark .bench-theme-toggle__icon {
    color: rgba(255, 255, 255, .82);
}

/* Static header logo. */
.bench-header-auth {
    width: 100%;
    justify-content: space-between;
    transition: none;
}

.bench-header-auth.is-floating {
    width: auto;
    justify-content: flex-start;
}

.bench-header-logo.header-mascot-badge {
    width: 160px;
    height: 28px;
    flex: 0 0 160px;
    margin-right: auto;
    transform: none;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.bench-header-logo.header-mascot-badge:hover {
    transform: none;
}

.bench-header-logo .header-mascot-badge__frame {
    width: 160px;
    height: 28px;
    overflow: visible;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.bench-header-logo .header-mascot-badge__frame::before {
    display: none !important;
}

.bench-header-logo .header-mascot-badge__img {
    width: 160px;
    height: 24px;
    object-fit: contain;
    animation: none !important;
    transform: none !important;
}

.bench-header-logo .header-mascot-badge__img--dark {
    display: none;
}

html[data-bench-theme="dark"] .bench-header-logo .header-mascot-badge__img--light {
    display: none;
}

html[data-bench-theme="dark"] .bench-header-logo .header-mascot-badge__img--dark {
    display: block;
}

/* Floating header clone-state, applied to the same auth block after scroll. */
.bench-header-auth.is-floating {
    position: fixed;
    top: 14px;
    right: 30px;
    z-index: 12000;
    padding: 8px 10px;
    border: 1px solid rgba(20, 22, 28, .08);
    border-radius: 999px;
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 14px 34px rgba(20, 22, 30, .1);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    opacity: 0;
    animation: benchHeaderFloatIn .22s ease both;
    will-change: opacity;
}

.bench-header-auth.is-floating.is-leaving {
    pointer-events: none;
    opacity: 1;
    animation: benchHeaderFloatOut .22s ease both;
}

html[data-bench-theme="dark"] .bench-header-auth.is-floating {
    border-color: rgba(255, 255, 255, .08);
    background: rgba(14, 16, 22, .76);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .24);
}

@keyframes benchHeaderFloatIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes benchHeaderFloatOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Shared dark subscription modal. */
html[data-bench-theme="dark"] .subscribe-modal__overlay {
    background: rgba(3, 5, 10, .76) !important;
}

html[data-bench-theme="dark"] .subscribe-modal__dialog {
    background: #12151d !important;
    color: var(--bench-theme-text) !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    box-shadow: 0 28px 90px rgba(0, 0, 0, .55) !important;
}

html[data-bench-theme="dark"] .subscribe-modal__title,
html[data-bench-theme="dark"] .subscribe-modal-card__name,
html[data-bench-theme="dark"] .subscribe-modal-card__price,
html[data-bench-theme="dark"] p.subscribe-modal__discount,
html[data-bench-theme="dark"] p.discleimer {
    color: var(--bench-theme-text) !important;
}

html[data-bench-theme="dark"] .subscribe-modal__desc,
html[data-bench-theme="dark"] .subscribe-modal__status-line,
html[data-bench-theme="dark"] .subscribe-modal-card__period,
html[data-bench-theme="dark"] .subscribe-modal-card__text,
html[data-bench-theme="dark"] .subscribe-modal-card__owned-text,
html[data-bench-theme="dark"] .subscribe-modal-card__muted-action {
    color: var(--bench-theme-muted) !important;
}

html[data-bench-theme="dark"] .subscribe-modal-card {
    background: #171b24 !important;
    border-color: rgba(255, 255, 255, .1) !important;
    color: var(--bench-theme-text) !important;
}

html[data-bench-theme="dark"] .subscribe-modal-card--current,
html[data-bench-theme="dark"] .subscribe-modal-card--accent {
    background: #0f1117 !important;
    border-color: rgba(255, 255, 255, .78) !important;
    color: var(--bench-theme-text) !important;
}

html[data-bench-theme="dark"] .subscribe-modal-card--team {
    background: linear-gradient(180deg, #34295d 0%, #1a1d2a 100%) !important;
    border-color: rgba(194, 184, 255, .38) !important;
}

html[data-bench-theme="dark"] .subscribe-modal-card__current-badge,
html[data-bench-theme="dark"] .subscribe-modal-card--accent .subscribe-modal-card__label {
    background: #f5f7fb !important;
    color: #111318 !important;
}

html[data-bench-theme="dark"] .subscribe-modal-card__muted-action {
    background: rgba(255, 255, 255, .07) !important;
}

html[data-bench-theme="dark"] .subscribe-modal__close {
    color: rgba(245, 247, 251, .78) !important;
    background: transparent !important;
}

html[data-bench-theme="dark"] .subscribe-modal__close:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, .08) !important;
}

html[data-bench-theme="dark"] .subscribe-modal__dialog .auth-btn,
html[data-bench-theme="dark"] .subscribe-modal-card__btn,
html[data-bench-theme="dark"] .subscribe-modal-card__btn-secondary,
html[data-bench-theme="dark"] .subscribe-modal-card__btn-year {
    background: #f5f7fb !important;
    color: #111318 !important;
}

/* Horizontal tabs edge fades. */
html[data-bench-theme="dark"] .tabs-container::before {
    background: linear-gradient(to right, var(--bench-theme-bg), rgba(13, 15, 20, 0)) !important;
}

html[data-bench-theme="dark"] .tabs-container::after {
    background: linear-gradient(to left, var(--bench-theme-bg), rgba(13, 15, 20, 0)) !important;
}

/* Main listings and smart tabs. */
html[data-bench-theme="dark"] #benchmarkAppsTabsContainer #tabs .tab,
html[data-bench-theme="dark"] .benchmark-top-filter__tab,
html[data-bench-theme="dark"] .benchmark-smart-tab,
html[data-bench-theme="dark"] .content-switcher button {
    background: rgba(255, 255, 255, .07) !important;
    color: rgba(245, 247, 251, .76) !important;
}

html[data-bench-theme="dark"] #benchmarkAppsTabsContainer #tabs .tab.active,
html[data-bench-theme="dark"] .benchmark-top-filter__tab.active,
html[data-bench-theme="dark"] .benchmark-smart-tab.active,
html[data-bench-theme="dark"] .content-switcher button.active {
    background: #f5f7fb !important;
    color: #111318 !important;
}

html[data-bench-theme="dark"] .content-switcher {
    background: rgba(255, 255, 255, .06) !important;
}

html[data-bench-theme="dark"] .resource-title-link,
html[data-bench-theme="dark"] .resource-group-title h3,
html[data-bench-theme="dark"] .resource-group-title h3 a,
html[data-bench-theme="dark"] #content .resource-title-link,
html[data-bench-theme="dark"] p.child_title,
html[data-bench-theme="dark"] .child_title,
html[data-bench-theme="dark"] .benchmark-gamification-card__title {
    color: var(--bench-theme-text) !important;
}

html[data-bench-theme="dark"] .resource-title-link:hover {
    color: #fff !important;
}

html[data-bench-theme="dark"] .resource-meta,
html[data-bench-theme="dark"] .resource-meta span,
html[data-bench-theme="dark"] .resource-items-count,
html[data-bench-theme="dark"] .benchmark-resource-meta {
    color: var(--bench-theme-muted) !important;
}

html[data-bench-theme="dark"] .resource-badge,
html[data-bench-theme="dark"] .sponsor-badge {
    background: rgba(255, 255, 255, .08) !important;
    border-color: rgba(255, 255, 255, .14) !important;
    color: rgba(245, 247, 251, .82) !important;
}

/* Inline paywalls in smart results and detail pages. */
html[data-bench-theme="dark"] .bench-search-paywall-divider__line,
html[data-bench-theme="dark"] .bench-search-paywall-notice__line,
html[data-bench-theme="dark"] .bench-gamification-paywall-notice__line {
    background: rgba(255, 255, 255, .14) !important;
}

html[data-bench-theme="dark"] .bench-search-paywall-divider__title,
html[data-bench-theme="dark"] .bench-search-paywall-notice__title,
html[data-bench-theme="dark"] .bench-gamification-paywall-notice__title,
html[data-bench-theme="dark"] .inline-paywall-notice-simple-title,
html[data-bench-theme="dark"] p.inline-paywall-notice-simple-title {
    color: var(--bench-theme-text) !important;
}

html[data-bench-theme="dark"] .bench-search-paywall-divider__text,
html[data-bench-theme="dark"] .bench-search-paywall-notice__text,
html[data-bench-theme="dark"] .bench-gamification-paywall-notice__text,
html[data-bench-theme="dark"] .inline-paywall-notice-simple-sub-title,
html[data-bench-theme="dark"] p.inline-paywall-notice-simple-sub-title {
    color: var(--bench-theme-muted) !important;
}

html[data-bench-theme="dark"] .bench-search-paywall-divider__btn,
html[data-bench-theme="dark"] .bench-search-paywall-notice__btn,
html[data-bench-theme="dark"] .bench-gamification-paywall-notice__btn,
html[data-bench-theme="dark"] .inline-paywall-notice-simple .auth-btn {
    background: #f5f7fb !important;
    color: #111318 !important;
}

html[data-bench-theme="dark"] .inline-paywall-notice-simple {
    background: #0f1117 !important;
    border-color: rgba(255, 255, 255, .1) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

html[data-bench-theme="dark"] .inline-paywall-notice-simple-content {
    background: transparent !important;
    color: var(--bench-theme-text) !important;
}

html[data-bench-theme="dark"] .inline-paywall-notice-simple .auth-btn--secondary {
    background: rgba(255, 255, 255, .08) !important;
    color: var(--bench-theme-text) !important;
}

html[data-bench-theme="dark"] .bench-search-paywall-divider__btn--secondary,
html[data-bench-theme="dark"] .bench-search-paywall-notice__btn--secondary,
html[data-bench-theme="dark"] .bench-gamification-paywall-notice__btn--secondary {
    background: rgba(255, 255, 255, .08) !important;
    color: var(--bench-theme-text) !important;
}

html[data-bench-theme="dark"] .search-paywall-overlay {
    background: rgba(3, 5, 10, .58) !important;
}

html[data-bench-theme="dark"] .search-paywall-card,
html[data-bench-theme="dark"] .benchmark-flow-paywall-modal__dialog {
    background: #12151d !important;
    border-color: rgba(255, 255, 255, .1) !important;
    color: var(--bench-theme-text) !important;
    box-shadow: 0 28px 90px rgba(0, 0, 0, .5) !important;
}

html[data-bench-theme="dark"] .search-paywall-title,
html[data-bench-theme="dark"] .benchmark-flow-paywall-modal__title {
    color: var(--bench-theme-text) !important;
}

html[data-bench-theme="dark"] .search-paywall-desc,
html[data-bench-theme="dark"] .search-paywall-features,
html[data-bench-theme="dark"] .benchmark-flow-paywall-modal__text {
    color: var(--bench-theme-muted) !important;
}

html[data-bench-theme="dark"] .benchmark-flow-paywall-modal__close {
    color: rgba(245, 247, 251, .82) !important;
}

/* Auth, account, subscription and collection surfaces. */
html[data-bench-theme="dark"] .auth-page-card,
html[data-bench-theme="dark"] .account-box,
html[data-bench-theme="dark"] .auth-success-box,
html[data-bench-theme="dark"] .auth-logged-box,
html[data-bench-theme="dark"] .subscribe-card,
html[data-bench-theme="dark"] .collection-card,
html[data-bench-theme="dark"] .collection-item,
html[data-bench-theme="dark"] .bench-collection-card {
    background: var(--bench-theme-surface) !important;
    border-color: var(--bench-theme-border) !important;
    color: var(--bench-theme-text) !important;
}

html[data-bench-theme="dark"] .auth-page-card h1,
html[data-bench-theme="dark"] .auth-page-card h2,
html[data-bench-theme="dark"] .account-box h1,
html[data-bench-theme="dark"] .account-box h2,
html[data-bench-theme="dark"] .subscribe-card__title,
html[data-bench-theme="dark"] .subscribe-card__price,
html[data-bench-theme="dark"] .collection-card__title,
html[data-bench-theme="dark"] .collection-title {
    color: var(--bench-theme-text) !important;
}

html[data-bench-theme="dark"] .auth-subtitle,
html[data-bench-theme="dark"] .auth-checkbox-text,
html[data-bench-theme="dark"] .auth-links,
html[data-bench-theme="dark"] .account-row,
html[data-bench-theme="dark"] .subscribe-card__period,
html[data-bench-theme="dark"] .subscribe-card__desc,
html[data-bench-theme="dark"] .collection-card__meta,
html[data-bench-theme="dark"] .collection-meta,
html[data-bench-theme="dark"] .subscription-status-mini__label{
    color: var(--bench-theme-muted) !important;
}

html[data-bench-theme="dark"] .auth-checkbox-text a,
html[data-bench-theme="dark"] .auth-links a,
html[data-bench-theme="dark"] .account-row a,
html[data-bench-theme="dark"] .collection-card a {
    color: var(--bench-theme-text) !important;
}

html[data-bench-theme="dark"] .auth-page-card input,
html[data-bench-theme="dark"] .auth-page-card textarea,
html[data-bench-theme="dark"] .form-group input,
html[data-bench-theme="dark"] .form-group textarea,
html[data-bench-theme="dark"] .account-box input,
html[data-bench-theme="dark"] .account-box textarea {
    background: #0f1117 !important;
    border-color: rgba(255, 255, 255, .14) !important;
    color: var(--bench-theme-text) !important;
}

html[data-bench-theme="dark"] .auth-page-card input::placeholder,
html[data-bench-theme="dark"] .form-group input::placeholder {
    color: rgba(245, 247, 251, .42) !important;
}

html[data-bench-theme="dark"] .auth-checkbox-box {
    border-color: rgba(255, 255, 255, .36) !important;
    background: transparent !important;
}

html[data-bench-theme="dark"] .auth-btn {
    background: #f5f7fb !important;
    color: #111318 !important;
}

html[data-bench-theme="dark"] .auth-btn--secondary {
    background: rgba(255, 255, 255, .08) !important;
    color: var(--bench-theme-text) !important;
}

html[data-bench-theme="dark"] .auth-btn--danger {
    background: #ff5c5f !important;
    color: #fff !important;
}

html[data-bench-theme="dark"] .subscribe-toggle {
    background: rgba(255, 255, 255, .08) !important;
    border-color: rgba(255, 255, 255, .12) !important;
}

html[data-bench-theme="dark"] .subscribe-card.active {
    background: #0f1117 !important;
    border-color: rgba(255, 255, 255, .72) !important;
}

/* Standalone auth/account logo. */
html[data-bench-theme="dark"] .back_to_bench-logo {
    content: url("/assets/templates/revision/img/mobile-logo-dark.svg");
    width: 80px;
    height: 80px;
}

html[data-bench-theme="dark"] .back_to_bench-tooltip {
    background: rgba(18, 21, 29, .94) !important;
    color: var(--bench-theme-text) !important;
    border: 1px solid rgba(255, 255, 255, .1) !important;
}

html[data-bench-theme="dark"] .back_to_bench-tooltip::before {
    border-right-color: rgba(18, 21, 29, .94) !important;
}

/* Auth/account center mascot keeps the same visual footprint in both themes. */
html[data-bench-theme="dark"] .auth-page-wrap > .header-mascot-badge,
html[data-bench-theme="dark"] .account-page-wrap > .header-mascot-badge,
html[data-bench-theme="dark"] main > .header-mascot-badge {
    width: 56px !important;
    height: 56px !important;
    flex-basis: 56px !important;
}

html[data-bench-theme="dark"] .auth-page-wrap > .header-mascot-badge .header-mascot-badge__frame,
html[data-bench-theme="dark"] .account-page-wrap > .header-mascot-badge .header-mascot-badge__frame,
html[data-bench-theme="dark"] main > .header-mascot-badge .header-mascot-badge__frame {
    width: 56px !important;
    height: 56px !important;
}

html[data-bench-theme="dark"] .auth-page-wrap > .header-mascot-badge .header-mascot-badge__img,
html[data-bench-theme="dark"] .account-page-wrap > .header-mascot-badge .header-mascot-badge__img,
html[data-bench-theme="dark"] main > .header-mascot-badge .header-mascot-badge__img {
    width: 32px !important;
    height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
}

@media (max-width: 760px) {
    .bench-theme-toggle {
        width: 52px;
        height: 34px;
    }

    .bench-theme-toggle__track {
        width: 48px;
        height: 28px;
    }

    .bench-theme-toggle__thumb {
        width: 22px;
        height: 22px;
    }

    .bench-theme-toggle.is-dark .bench-theme-toggle__thumb {
        transform: translateX(20px);
    }

    .bench-header-logo.header-mascot-badge {
        width: 118px;
        height: 24px;
        flex-basis: 118px;
    }

    .bench-header-logo .header-mascot-badge__frame,
    .bench-header-logo .header-mascot-badge__img {
        width: 118px;
        height: 18px;
    }

    .bench-header-auth.is-floating {
        top: 8px;
        right: 8px;
        max-width: calc(100vw - 16px);
    }
}