a,a:hover,a:visited {
    text-decoration: none
}

a {
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in
}

p > a {
    display: inline-block
}

article {
    margin-bottom: 50px;
    margin-top: 30px
}

article .ttl {
    margin-bottom: 25px
}

form button svg {
    fill: #bdbdbd;
    width: 38px;
    height: 38px;
    -webkit-transition: all .3s ease-in;
    transition: all .3s ease-in
}

.breadcrumbs {
    margin: 15px 0
}



/* === Listing container === */
.listing {
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #bdbdbd;
    border-radius: 6px;
    width: 100%;
    height: max-content;
}

.listing p {
    font-size: 12px;
    color: #676767;
    text-align: center;
    padding: 7px;
}

.listing .ttl {
    text-align: center;
    padding: 16px 10px 10px;
    background-color: #d9d9d9;
    border-radius: 6px 6px 0 0;
}

/* === Optimized list === */
.listing-ol {
    margin: 10px 3px 25px 10px;
    overflow-y: auto;
    content-visibility: auto;
    contain-intrinsic-size: auto 340px;
}

.listing ol {
    overflow-y: auto;                 /* а не scroll */
    scrollbar-gutter: stable;         /* держим желоб постоянным */
    content-visibility: auto;
    contain-intrinsic-size: 340px;    /* твоя высота для stand-списка */
}

.listing ol li {
    min-height: 24px;
}

.listing.listing_tall .listing-ol {
    contain-intrinsic-size: auto 690px;
}

/* === Each list item === */
.listing-item {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    line-height: 1.9;
    gap: 6px;
    padding-left: 6px; /* чуть меньше, т.к. нет номера */
    transition: color .2s ease-in;
}

.listing-item {
    display: flex;
    align-items: center;
    min-height: 24px;                 /* высота строки */
}



/* === Favicon and link === */
.listing-link {
    color: #00a3ff;
    font-weight: 700;
    width: auto;
    white-space: nowrap;
    transition: color .2s ease-in;
}


.listing-link {                     /* ссылка внутри li */
    display: inline-flex;
    align-items: center;
    min-height: 24px;
}

/* favicon prefix */
.listing .favicon::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    background-color: transparent;
    vertical-align: middle;
}

/* === Additional info inside item === */
.listing-item span {
    color: #676767;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .2s ease-in;
}

/* === Hover states === */
@media (any-hover: hover) {
    .listing-item:hover .listing-link {
        color: #0075b7;
    }

    .listing button:hover {
        background-color: #0075b7;
    }
}

/* === Buttons inside listings === */
.listing button {
    background-color: #00a3ff;
    border-radius: 11px;
    width: calc(100% - 14px);
    display: block;
    font-weight: 700;
    font-size: 15px;
    line-height: 33px;
    margin: 0 auto 7px;
    color: #fff;
    transition: background-color .2s ease-in;
}

/* === Scrollbar styling === */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #bdbdbd;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #757474;
}

/* === Responsive sizing === */
.listing.listing_stand .listing-ol {
    contain-intrinsic-size: auto 340px;
}

.listing.listing_tall .listing-ol {
    contain-intrinsic-size: auto 690px;
}




.rating-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 2px
}

.rating-list__item {
    cursor: pointer;
    height: 24px;
    width: 24px;
    background-image: none;
    background-repeat: no-repeat!important;
    background-size: contain!important;
    background-position: center!important
}

.rating-list__item.rateon,.rating-list__item.rateon-forced {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M16.899 0.623378L20.2402 8.24415C20.3659 8.53096 20.5662 8.77877 20.8204 8.96172C21.0745 9.14467 21.3731 9.25606 21.6849 9.28425L29.8245 10.0141C30.7455 10.1481 31.1128 11.2776 30.4451 11.9279L24.3137 17.0788C23.8172 17.4958 23.5914 18.1512 23.7279 18.7842L25.5102 27.1273C25.6666 28.0433 24.7059 28.7433 23.8818 28.3089L16.7773 24.1485C16.5094 23.9912 16.2043 23.9083 15.8936 23.9083C15.5829 23.9083 15.2779 23.9912 15.0099 24.1485L7.90546 28.3064C7.08381 28.7383 6.12066 28.0408 6.27705 27.1248L8.05937 18.7817C8.19341 18.1487 7.97 17.4933 7.47354 17.0763L1.33968 11.9304C0.674413 11.2825 1.0418 10.1506 1.96026 10.0165L10.0999 9.28674C10.4117 9.25854 10.7103 9.14716 10.9644 8.9642C11.2185 8.78125 11.4189 8.53344 11.5446 8.24664L14.8858 0.62586C15.3003 -0.208206 16.4869 -0.208206 16.899 0.623378Z' fill='%23FDD835'/%3e%3c/svg%3e")
}

.rating-list__item,.rating-list__item.rateoff,.rating-list__item.rateon-forced_off {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='33' height='32' viewBox='0 0 33 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M14.9287 4.02784C15.5238 2.82308 17.2422 2.82308 17.8373 4.02784L21.0492 10.5362L28.2314 11.5801C29.5619 11.7734 30.0935 13.4084 29.1303 14.3464L23.934 19.4124L25.1606 26.5661C25.3876 27.8901 23.9969 28.9009 22.8073 28.2753L16.383 24.898L9.95873 28.2753C8.7692 28.9009 7.37843 27.8907 7.60548 26.5655L8.83275 19.4124L3.63572 14.3464C2.67258 13.4084 3.20413 11.7734 4.534 11.5801L11.7162 10.5362L14.9287 4.02784ZM16.383 4.82086L13.1924 11.2842C13.076 11.5199 12.9042 11.7238 12.6915 11.8783C12.4789 12.0328 12.2319 12.1334 11.9717 12.1712L4.8385 13.2085L10.0004 18.2401C10.1887 18.4237 10.3295 18.6503 10.4107 18.9004C10.4919 19.1505 10.511 19.4167 10.4665 19.6758L9.24845 26.78L15.6284 23.4258C15.8611 23.3035 16.1201 23.2396 16.383 23.2396C16.6459 23.2396 16.9049 23.3035 17.1377 23.4258L23.5176 26.78L22.2996 19.6758C22.255 19.4167 22.2742 19.1505 22.3554 18.9004C22.4366 18.6503 22.5773 18.4237 22.7656 18.2401L27.9275 13.2092L20.7943 12.1726C20.5341 12.1348 20.2869 12.0343 20.0742 11.8798C19.8614 11.7253 19.6894 11.5213 19.573 11.2855L16.383 4.82086Z' fill='%23AAAAAA'/%3e%3c/svg%3e")
}

.rating-list__item.rateoff {
    background: no-repeat 0 0
}

.rate {
    font-size: 19px;
    font-weight: 700;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 40px;
    margin-top: 30px
}

.rate svg {
    width: 21px;
    height: 21px
}

.rate svg:first-child {
    fill: #00a3ff
}

.rate svg:last-child {
    fill: #ff4747
}

.link {
    color: #00a3ff;
    font-size: 21px;
    font-weight: 700
}

.wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 40px
}

.slider {
    max-width: 455px;
    margin: 0 auto
}

.slider .slide {
    margin-bottom: 16px
}

.slider .slide img {
    aspect-ratio: 455/313;
    -o-object-fit: cover;
    object-fit: cover
}

.slider .btns {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 10px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.slider .btns a {
    width: 133px
}

.holder,.row,.thumbs,footer nav {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.holder {
    gap: 10px;
    margin: 30px 0
}

.holder .recl {
    width: 100%
}

.holder .recl img,.slider .btns a img,.thumb-img img {
    aspect-ratio: 133/91;
    -o-object-fit: cover;
    object-fit: cover
}

.content .ttl-1,.row {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 6px
}

.content .ttl-1 svg {
    width: 32px;
    height: 32px
}

.content p {
    color: #555
}

.row {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 10px
}

.thumb {
    padding: 10px;
    margin-bottom: 10px;
    width: 100%
}

.thumbs,footer nav {
    margin: 10px 0
}

.thumb p,footer {
    text-align: center
}

.thumb p {
    font-size: 15px;
    color: #00a3ff;
    padding: 9px;
    font-weight: 700
}

.thumb-img {
    margin: 0 auto
}

.holder .recl img,.thumb-img img {
    aspect-ratio: 300/250;
    width: 100%
}

.thumb-img img {
    border: 1px solid #000;
    border-radius: 3px;
    aspect-ratio: 279/193
}

footer {
    background-color: #343434;
    color: #bdbdbd;
    padding: 35px 0
}

footer nav {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 1em 0
}

footer nav a {
    color: #00a3ff;
    padding: 5px 8px;
    position: relative
}

footer nav a:not(:last-child)::after {
    content: "|";
    color: #bdbdbd;
    right: -3px;
    position: absolute
}

@media (any-hover: hover) {
    .breadcrumbs li a:hover,.link:hover,.listing ol li:hover a,.thumb:hover p,a:hover:hover {
        color:#0075b7
    }

    form button:hover svg {
        fill: #00a3ff
    }

    .listing button:hover {
        background-color: #0075b7
    }
}

@media only screen and (min-width: 479.98px) {
    .holder .recl,.listing {
        width:calc(50% - 5px)
    }

    .thumb {
        width: 50%
    }
}

@media only screen and (min-width: 767.98px) {
    article {
        padding:16px 14px
    }

    header {
        margin-top: 30px;
        margin-bottom: 30px
    }

    .logo {
        font-size: 34px
    }

    form input {
        padding: 11px 30px;
        font-size: 21px
    }

    form input::-webkit-input-placeholder,form input::-moz-placeholder,form input:-ms-input-placeholder,form input::-ms-input-placeholder,form input::placeholder {
        font-size: 21px
    }

    form button {
        margin-right: 18px
    }

    .breadcrumbs {
        margin: 27px 0
    }

    .holder .recl,.listing {
        width: calc(33.333% - 6.6666666667px)
    }

    .rating-list__item {
        height: 30px;
        width: 30px
    }

    .wrap {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row
    }

    .slider {
        margin: 0
    }

    .content,.slider {
        width: calc(50% - 15px)
    }

    .thumb {
        width: 33.333%
    }
}

@media only screen and (min-width: 991.98px) {
    .holder .recl,.listing {
        width:calc(25% - 7.5px)
    }

    .wrap {
        gap: 30px;
        margin-bottom: 100px
    }

    .slider {
        width: calc(40% - 15px)
    }

    .content {
        width: calc(60% - 15px)
    }

    .thumb {
        width: 25%
    }
}

@media all and (min-width: 1250px) {
    .container {
        padding-inline:0
    }
}

.rating-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #000c;
    color: #fff;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 14px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease-in-out;
    z-index: 9999
}

.rating-toast.show {
    opacity: 1
}

.search-layer {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 146px;
    width: 90vw;
    max-width: 900px;
    min-width: 320px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e3e3e3;
    box-shadow: 0 8px 32px #00000014;
    z-index: 80;
    padding: 22px 18px 18px;
    max-height: 60vh;
    overflow-y: auto;
    opacity: 0;
    transition: opacity .18s;
    display: none
}

.search-layer.active {
    opacity: 1
}

@media (max-width: 600px) {
    .search-layer {
        left:0;
        right: 0;
        transform: none;
        width: 100vw;
        top: 136px;
        border-radius: 0;
        max-height: none
    }
}

.search-spinner-centered {
    position: fixed;
    z-index: 1200;
    left: 50%;
    top: 50%;
    width: 70px;
    height: 70px;
    transform: translate(-50%,-50%);
    background: #ffffffd9;
    border-radius: 14px;
    box-shadow: 0 4px 20px #00000014;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: opacity .18s
}

.search-spinner-centered svg {
    animation: spin 1s linear infinite
}

@keyframes spin {
    100% {
        transform: rotate(360deg)
    }
}

.search-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-bottom: 1px solid #eee
}

.search-card > img {
    width: 128px;
    height: 96px;
    object-fit: contain;
    border-radius: 4px
}

.search-card > div {
    flex: 1;
    min-width: 0
}

.search-card > div > a {
    color: #00a3ff;
    font-weight: 700;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block
}

.search-card > span {
    margin-left: 10px;
    color: #ffb300;
    font-size: 15px
}

.search-card .search-card-domain {
    color: #999;
    font-size: 13px
}

.search-card .search-card-category {
    color: #444;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.favicon,.favicon- {
    position: relative;
    display: inline-block;
    padding-left: 24px;
    vertical-align: middle
}

.favicon::before,.favicon-::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    background-color: transparent
}

.listing ol {
    content-visibility: auto;
    contain-intrinsic-size: 1px 340px;
}

a,
a.listing-link {
    color: #0072c6; /* контраст ≈ 5.8:1 на белом */
}
a:hover {
    color: #005fa3;
}

.listing p,
.listing ol li span {
    color: #4a4a4a; /* вместо #676767, контраст ~6.5:1 */
}

span.accent {
    color: #0056b3; /* более насыщенный синий */
}

footer span.accent {
    color: #bdbdbd;
    text-shadow: 0 0 2px #0056b3;
}