@font-face {
    font-family: "Stem-Regular";
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    src: url(../font/Stem-Regular-TW.woff2) format("woff2"), url(../font/Stem-Regular-TW.woff) format("woff");
}
@font-face {
    font-family: "Stem-Medium";
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    src: url("../font/Stem-Medium-TW.woff2") format("woff2"),
    url("../font/Stem-Medium-TW.woff") format("woff");
}
@font-face {
    font-family: "Stem-Bold";
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    src: url("../font/Stem-Bold-TW.woff2") format("woff2"),
    url("../font/Stem-Bold-TW.woff") format("woff");
}

:root {
    --auto-blue: #0875ff;
    --auto-blue-dark: #075fd0;
    --blue: #0875ff;
    --navy: #12366b;
    --ink: #15335f;
    --muted: #6b85aa;
    --line: #dceaff;
    --pale: #edf6ff;
    --white: #fff;
    --orange: #ff744b;
    --green: #18a878
}

.bold, h1, h2, h3, h4, h5, h6 {
    font-family: "Stem-Bold";
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: #fff;
    color: var(--ink);
    font-family: "Stem-Regular";
    /*font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;*/
}

a {
    text-decoration: none;
    color: inherit
}

button,
select {
    font: inherit
}

.wrap {
    width: min(1380px, calc(100% - 64px));
    margin: auto
}

header {
    height: 64px;
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid #e8f1ff;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 5
}

.header-inner {
    display: flex;
    align-items: center;
    gap: 42px
}

.logo {
    font-size: calc(25rem / 16);
    font-weight: 950;
    letter-spacing: -1.1px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #11366c
}

.logo-mark {
    width: 27px;
    height: 24px;
    display: inline-block;
    position: relative
}

.logo-mark:before,
.logo-mark:after {
    content: "";
    position: absolute;
    top: 1px;
    bottom: 1px;
    width: 10px;
    transform: skew(-30deg);
    border-radius: 1px;
    background: #147cff
}

.logo-mark:before {
    left: 1px;
    opacity: .55
}

.logo-mark:after {
    left: 13px
}

.nav {
    display: flex;
    gap: 29px;
    align-items: center;
    flex: 1;
    font-size: calc(16rem / 16);
line-height: 150%;
    font-weight: 750;
    color: #254a7d
}

.nav a:hover {
    color: var(--blue)
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 9px
}

.lang {
    font-size: calc(16rem / 16);
line-height: 150%;
    font-weight: 800;
    color: #24528e;
    margin-right: 8px
}

.btn {
    border: 1px solid #bcd7ff;
    border-radius: 10px;
    padding: 12px 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: calc(16rem / 16);
line-height: 150%;
    font-weight: 800;
    background: #fff;
    color: #1762c8;
    cursor: pointer;
    white-space: nowrap
}

.btn.primary {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
    box-shadow: 0 6px 18px #0875ff25
}

.btn.primary:hover {
    background: #0065e5
}

.btn.ghost {
    background: #fff9;
    border-color: #b8d5ff
}

.hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(110deg, #fafdff 0%, #e8f4ff 37%, #cfe5ff 68%, #eaf5ff 100%);
    min-height: 365px
}

.hero:before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 75% 16%, rgba(255, 255, 255, .95), transparent 31%), linear-gradient(180deg, transparent 65%, rgba(255, 255, 255, .94) 100%);
    pointer-events: none
}

.hero:after {
    content: "";
    position: absolute;
    right: -5%;
    top: -40px;
    width: 65%;
    height: 360px;
    background: linear-gradient(120deg, transparent 10%, rgba(255, 255, 255, .25), transparent 70%);
    transform: skewY(-7deg)
}

.hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    align-items: center;
    min-height: 365px;
    gap: 10px;
    padding: 0px 0 26px
}

.kicker {
    margin-top: 30px;
    font-size: calc(16rem / 16);
    line-height: 150%;
    text-transform: uppercase;
    letter-spacing: .035em;
    color: #1556a8;
    font-weight: 800
}

.hero h1 {
    font-size: clamp(34px, 3.7vw, 51px);
    line-height: 1.04;
    letter-spacing: -1.6px;
    margin: 15px 0 14px;
    color: #13366b
}

.hero h1 span {
    color: #0875ff
}


.filternew.ts-wrapper .ts-control{
    border: none;
    font-size: calc(14rem / 16);
}

.hero p {
    font-size: calc(16rem / 16);
    line-height: 1.65;
    color: #3d6191;
    max-width: 480px;
    margin: 0 0 19px
}

.hero-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}

.benefits {
    display: flex;
    gap: 17px;
    margin-top: 31px;
    flex-wrap: wrap
}

.benefit {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: calc(13rem / 16);
    line-height: 1.35;
    color: #426696;
    padding-right: 14px;
    border-right: 1px solid #cfe2fb
}

.benefit:last-child {
    border: 0
}

.benefit-icon {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1.5px solid #1680ff;
    border-radius: 8px;
    color: #0875ff;
    font-size: calc(17rem / 16);
    font-weight: 800
}

.hero .hero-art {
    height: 100%;
    position: relative;
    min-width: 0
}

.hero-car {
    position: absolute;
    z-index: 2;
    width: 86%;
    height: 76%;
    right: 0;
    bottom: 0;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 18px 13px #19395b35)
}

.hero .mountain {
    position: absolute;
    right: -5%;
    top: 0;
    width: 1000px;
    height: 100%;
    object-fit: cover;
    object-position: center 45%;
    mix-blend-mode: multiply;
    mask-image: linear-gradient(90deg, transparent, #000 22%, #000 88%, transparent)
}

.auction-sheet {
    position: absolute;
    z-index: 1;
    right: 2%;
    top: 17px;
    width: 24%;
    height: 62%;
    object-fit: cover;
    opacity: .74;
    border: 7px solid #fff;
    border-radius: 8px;
    box-shadow: 0 9px 25px #416da324
}

.hero-data {
    position: absolute;
    z-index: 3;
    left: 1%;
    top: 38px;
    width: 45%;
    padding: 14px 15px;
    background: #ffffffed;
    border: 1px solid #e2eeff;
    border-radius: 12px;
    box-shadow: 0 14px 35px #3665a31c
}

.data-top {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
    font-size: calc(12rem / 16);
    font-weight: 900;
    color: #153b73
}

.rating {
    padding: 5px 9px;
    border-radius: 7px;
    background: #e7f1ff;
    color: #0875ff;
    font-size: calc(13rem / 16);
}

.data-specs {
    font-size: 9px;
    color: #6681a6;
    margin-top: 7px
}

.data-prices {
    display: flex;
    gap: 12px;
    margin-top: 12px;
    padding-top: calc(9rem / 16);
    border-top: 1px solid #e5effc
}

.data-prices div {
    font-size: calc(9rem / 16);
    color: #8095b1
}

.data-prices b {
    display: block;
    color: #163e77;
    font-size: calc(13rem / 16);
    margin-top: 3px
}

.data-pills {
    display: flex;
    gap: 5px;
    margin-top: 10px
}

.data-pills span {
    font-size: calc(8rem / 16);
    background: #e7f2ff;
    color: #1767c8;
    padding: 4px 7px;
    border-radius: 5px;
    font-weight: 800
}

.car-thumbs {
    display: flex;
    gap: 4px;
    margin-top: 8px
}

.car-thumbs img {
    width: 18%;
    height: 23px;
    object-fit: cover;
    border-radius: 3px
}

.hero-arrow {
    position: absolute;
    right: 0;
    top: 47%;
    z-index: 4;
    background: #fff;
    color: #0875ff;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    box-shadow: 0 5px 15px #275b9a24
}

section {
    scroll-margin-top: 18px
}

.api-section {
    padding: 20px 0 18px
}

.calendar-days-f{
    display: flex;
    align-items: center;
    gap: 10px;
}

.api-panel {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1fr;
    gap: 22px;
    align-items: center;
    min-height: 210px;
    padding: 22px 27px;
    border-radius: 14px;
    background: linear-gradient(112deg, #e2f0ff 0%, #f0f7ff 55%, #d9ebff 100%);
    border: 1px solid #d8eaff;
    overflow: hidden;
    position: relative
}

.api-panel:after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    right: -80px;
    top: -170px;
    border-radius: 50%;
    background: #fff9
}

.api-copy,
.code-window,
.api-features {
    position: relative;
    z-index: 1
}

.api-label {
    display: inline-block;
    border: 1px solid #9fc8ff;
    color: #0875ff;
    background: #fff8;
    padding: 3px 7px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 900;
    margin-bottom: 7px
}

.api-copy h2 {
    font-size: clamp(22px, 2.1vw, 29px);
    line-height: 1.12;
    letter-spacing: -.6px;
    margin: 0 0 10px;
    color: #14386d
}

.api-copy p {
    font-size: calc(16rem / 16);
line-height: 150%;
    line-height: 1.65;
    color: #5879a4;
    margin: 0 0 13px;
    max-width: 330px
}

.api-copy .btn {
    padding: 11px 14px
}

.api-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.code-window {
    background: #102b50;
    color: #d5e7ff;
    border-radius: 10px;
    padding: 13px 14px;
    box-shadow: 0 13px 24px #244d7e2a;
    font: 9px/1.75 ui-monospace, SFMono-Regular, Menlo, monospace;
    min-width: 0
}

.code-tabs {
    display: flex;
    gap: 13px;
    color: #a8c4e9;
    font: 9px Arial;
    margin: -2px 0 10px
}

.code-tabs b {
    background: #27466e;
    padding: 5px 8px;
    border-radius: 5px;
    color: #fff
}

.code-window .cm {
    color: #7898c2
}

.code-window .key {
    color: #7eb8ff
}

.code-window .val {
    color: #9be4c2
}

.api-features {
    display: grid;
    gap: 12px
}

.feature {
    display: grid;
    grid-template-columns: 33px 1fr;
    gap: 10px;
}

.feature-icon {
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #d9eaff;
    color: #0875ff;
    font-size: 22px;
    font-weight: 900;
}

.feature b {
    display: block;
    color: #1d477e;
    margin-bottom: 3px
}

.feature span {
    display: block;
    color: #6481a8;
    font-size: 14px;
    line-height: 1.45
}

.stats-section {
    padding: 0 0 18px
}

.stats-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr) 1.5fr;
    gap: 0;
    border: 1px solid #dcecff;
    background: linear-gradient(100deg, #f6fbff, #edf6ff);
    border-radius: 12px;
    padding: 14px 16px;
    align-items: center
}

.stat {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 13px;
    border-right: 1px solid #d8e8fc
}

.stat:first-child {
    padding-left: 0
}

.stat-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    background: #e1efff;
    color: #0875ff;
    border-radius: 50%;
    font-size: 18px
}

.stat strong {
    font-size: calc(16rem / 16);
    display: block;
    color: #14386d
}

.stat small {
    font-size: 9px;
    color: #7390b6;
    display: block;
    margin-top: 3px
}

.auction-brands {
    padding-left: 16px
}

.auction-brands>span {
    font-size: 9px;
    color: #6d88ad;
    display: block;
    margin-bottom: 8px
}

.brand-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap
}

.brand-row b {
    background: #fff;
    border: 1px solid #e0ecfc;
    border-radius: 7px;
    padding: 7px 9px;
    color: #174b91;
    font-size: 9px;
    box-shadow: 0 3px 8px #315a8d0b
}

.catalog {
    padding: 2px 0 24px
}

.filter-panel {
    background: linear-gradient(110deg, #f3f9ff, #eaf4ff);
    border: 1px solid #d8e9ff;
    border-radius: 12px;
    padding: 19px 20px 17px
}

.filter-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px
}

.filter-heading h2 {
    font-size: 20px;
    margin: 0;
    color: #14386d
}

.filter-heading p {
    font-size: 13px;
    color: #7190b9;
    margin: 5px 0 0
}

.advanced {
    font-size: 13px;
    color: #0875ff;
    font-weight: 800
}

.filters {
    display: grid;
    grid-template-columns: 1.2fr 1.2fr .72fr .72fr .9fr .9fr;
    gap: 11px
}

.field label {
    display: block;
    font-size: 9px;
    color: #456a9e;
    font-weight: 800;
    margin: 0 0 6px 3px
}

.field select {
    width: 100%;
    padding: 12px 10px;
    border: 1px solid #d1e4ff;
    border-radius: 8px;
    background: #fff;
    color: #6884a9;
    font-size: 13px;
    outline: none
}

.field select:focus {
    border-color: #0875ff
}

.filter-btn {
    align-self: end;
    padding: 12px 15px
}

.section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 24px 0 14px
}

.section-title h2 {
    font-size: 20px;
    margin: 0;
    color: #14386d
}

.section-title a {
    font-size: 13px;
    color: #0875ff;
    font-weight: 800
}

.lot-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px
}

.lot {
    border: 1px solid #dceaff;
    border-radius: 9px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 14px #173d6a08;
    transition: .2s
}

.lot:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px #173d6a14
}

.lot-image {
    height: 150px;
    position: relative;
    background: #e7eff8
}

.lot-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.lot-badge {
    position: absolute;
    top: 9px;
    left: 9px;
    background: #fff;
    color: #0875ff;
    border-radius: 5px;
    padding: 5px 7px;
    font-size: 9px;
    font-weight: 900
}

.heart {
    position: absolute;
    right: 9px;
    top: 8px;
    border: 0;
    border-radius: 50%;
    background: #ffffffd9;
    width: 25px;
    height: 25px;
    color: #61799a;
    font-size: 16px
}

.lot-body {
    padding: 12px
}

.lot h3 {
    font-size: calc(16rem / 16);
    line-height: 150%;
    text-transform: uppercase;
    color: #14386d;
    margin: 0 0 4px;
    font-weight: 950
}

.lot-body .trim {
    font-size: 0.875rem;
    color: #7993b5;
    margin-bottom: 10px
}

.lot-body .mini-specs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 0.875rem;
    color: #6683a9;
    margin-bottom: 10px
}

.lot-body .grade-row {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 11px
}

.lot-body .grade {
    background: #0875ff;
    color: #fff;
    border-radius: 5px;
    padding: 4px 7px;
    font-size: 0.875rem;
    font-weight: 900
}

.lot-body .sold {
    background: #eaf3ff;
    color: #5780b7;
    border-radius: 5px;
    padding: 4px 7px;
    font-size: 0.875rem;
}

.lot-body .lot-prices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    border-top: 1px solid #edf3fc;
    padding-top: 9px
}

.lot-body .lot-prices span {
    font-size: 0.875rem;
    color: #8aa0bf;
    display: block;
    margin-bottom: 3px
}

.lot-body .lot-prices b {
    font-size: calc(18rem / 16);
    color: #14386d
}

.lot-body .lot-prices .final {
    text-align: right
}

.lot-body .lot-prices .final b {
    color: var(--orange)
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    padding: 22px 0 0
}

.pagination .page {
    width: 35px;
    height: 35px;
    border: 0;
    background: #fff;
    color: #24558e;
    border-radius: 6px;
    font-weight: 800;
    display: grid;
    place-items: center
}

.pagination .page.active {
    background: #0875ff;
    color: #fff
}

.pagination .page-arrow {
    width: auto;
    padding: 0 7px
}

footer {
    background: linear-gradient(110deg, #0d2547, #173c6d);
    color: #d7e8ff;
    padding: 22px 0;
    margin-top: 0;
    position: relative;
    overflow: hidden
}

footer:after {
    content: "";
    position: absolute;
    right: 10%;
    top: -100px;
    width: 300px;
    height: 230px;
    background: url('https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=700&q=70') center/cover;
    opacity: .09;
    mask-image: linear-gradient(90deg, transparent, #000)
}

.footer-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 35px
}

.footer-logo {
    font-size: 23px;
    color: #fff;
    font-weight: 950;
    display: flex;
    align-items: center;
    gap: 8px
}

.footer-nav {
    display: flex;
    gap: 23px;
    flex: 1;
    color: #c4d8f2
}

.footer-copy {
    font-size: calc(13rem / 16);
    color: #a9c1e2;
    line-height: 1.5;
    margin-right: 12px
}

@media(max-width:1000px) {
    .wrap {
        width: calc(100% - 36px)
    }

    .header-inner {
        gap: 22px
    }

    .nav {
        gap: 15px
    }

    .hero-inner {
        grid-template-columns: 1fr 1fr
    }

    .hero-art {
        height: 280px
    }

    .benefits {
        gap: 9px
    }

    .benefit {
        padding-right: 8px
    }

    .api-panel {
        grid-template-columns: 1fr 1fr
    }

    .api-features {
        grid-column: 1/-1;
        grid-template-columns: repeat(4, 1fr)
    }

    .stats-strip {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px
    }

    .stat {
        border: 0
    }

    .auction-brands {
        grid-column: 1/-1;
        padding: 8px 0 0
    }

    .filters {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .lot-grid {
        gap: 12px
    }

    .lot-image {
        height: 130px
    }

    .footer-inner {
        gap: 18px
    }

    .footer-nav {
        gap: 12px
    }
}

@media(max-width:680px) {
    .wrap {
        width: calc(100% - 28px)
    }

    header {
        height: auto;
        padding: 12px 0
    }

    .header-inner {
        flex-wrap: wrap;
        gap: 12px
    }

    .logo {
        font-size: 23px
    }

    .nav {
        order: 3;
        flex-basis: 100%;
        overflow: auto;
        gap: 19px;
        padding: 5px 0
    }

    .header-actions {
        margin-left: auto
    }

    .header-actions .lang,
    .header-actions .btn.ghost {
        display: none
    }

    .header-actions .btn {
        padding: 10px 11px;
        font-size: 10px
    }

    .hero-inner {
        grid-template-columns: 1fr;
        padding: 28px 0 12px
    }

    .hero h1 {
        font-size: 37px;
        letter-spacing: -1px
    }

    .hero p {
        font-size: 13px
    }

    .hero-art {
        height: 260px;
        margin-top: 0
    }

    .hero-data {
        left: 0;
        top: 12px;
        width: 48%;
        padding: 10px
    }

    .hero-car {
        width: 88%;
        height: 77%
    }

    .auction-sheet {
        right: 0;
        width: 23%;
        height: 54%
    }

    .benefits {
        margin-top: 21px
    }

    .benefit {
        font-size: 9px
    }

    .api-panel {
        grid-template-columns: 1fr;
        padding: 20px;
        gap: 16px
    }

    .api-copy h2 {
        font-size: 25px
    }

    .code-window {
        font-size: 9px
    }

    .api-features {
        grid-template-columns: repeat(2, 1fr)
    }

    .stats-strip {
        grid-template-columns: 1fr 1fr;
        padding: 12px 8px
    }

    .stat {
        padding: 4px 5px;
        gap: 8px
    }

    .stat-icon {
        width: 32px;
        height: 32px;
        font-size: 15px
    }

    .stat strong {
        font-size: 14px
    }

    .stat small {
        font-size: 8px
    }

    .auction-brands {
        padding: 7px 5px
    }

    .filters {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .filter-btn {
        grid-column: 1/-1
    }

    .filter-heading {
        align-items: flex-start
    }

    .filter-heading h2 {
        font-size: 17px
    }

    .advanced {
        max-width: 105px;
        text-align: right;
        line-height: 1.4
    }

    .lot-grid {
        grid-template-columns: 1fr
    }

    .lot-image {
        height: 190px
    }

    .lot-body {
        padding: 14px
    }

    .lot h3 {
        font-size: 13px
    }

    .mini-specs {
        font-size: 10px
    }

    .lot-prices b {
        font-size: 15px
    }

    .footer-inner {
        align-items: flex-start;
        flex-wrap: wrap
    }

    .footer-nav {
        order: 3;
        flex-basis: 100%;
        flex-wrap: wrap
    }

    .footer-copy {
        margin-left: auto
    }

    .footer-inner>.btn {
        display: none
    }
}

  .auto-filter {
    padding: 24px;
    border: 1px solid #d8e9ff;
    border-radius: 18px;
    background: linear-gradient(120deg, rgba(246,251,255,.98), rgba(233,244,255,.98));
    box-shadow: var(--auto-shadow);
  }
  .auto-filter__head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 16px; margin-bottom: 20px;
  }
  .auto-filter__title { margin: 0; font-size: clamp(21px, 2.5vw, 28px); letter-spacing: -.6px; }
  .auto-filter__subtitle { margin: 7px 0 0; font-size: 13px; line-height: 1.5; color: var(--auto-muted); }
  .auto-filter__advanced {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 0; border: 0; background: transparent; color: var(--auto-blue);
    font-size: cal(16rem/16); font-weight: 750;
  }
  .auto-filter__advanced svg { transition: transform .2s ease; }
  .auto-filter.is-expanded .auto-filter__advanced svg { transform: rotate(180deg); }
  .auto-filter__countries {
    display: flex;
    gap: 10px;
    margin-bottom: 19px;
  }
  .auto-filter__country {
    min-height: 58px; display: flex; align-items: center; gap: 11px;
    padding: 10px 20px; border: 1px solid var(--auto-border); border-radius: 12px;
    color: #2c5488; background: rgba(255,255,255,.85); text-align: left;
    transition: border-color .18s, background .18s, box-shadow .18s;
  }
  .auto-filter__country:hover { border-color: #91c2ff; }
  .auto-filter__country[aria-pressed="true"] {
    background: #e0efff; border-color: var(--auto-blue);
    box-shadow: inset 0 0 0 1px var(--auto-blue);
  }
  .auto-filter__flag {
    width: 31px; height: 31px; display: grid; place-items: center;
    border-radius: 50%; background: #fff; border: 1px solid #e1edfc;
    font-size: 19px; flex: 0 0 auto;
  }
  .auto-filter__country-name { font-size: calc(14rem/16); font-weight: 800; display: block; }
  .auto-filter__country-note { display: block; margin-top: 3px; color: var(--auto-muted); font-size: calc(12rem/16);}
  .auto-filter__grid {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
  }
  .auto-filter__field { min-width: 0; }
  .auto-filter__label {
    display: block; margin: 0 0 7px 2px;font-size: calc(14rem / 16); font-weight: 800; color: #315886;
  }
  .auto-filter__control {
    width: 100%; min-height: 44px; padding: 0 12px;
    border: 1px solid #d2e5ff; border-radius: 9px; outline: none;
    background: rgba(255,255,255,.96); color: var(--auto-ink); font-size: cal(16rem/16);
    transition: border-color .18s, box-shadow .18s;
  }
  .auto-filter__control::placeholder { color: #94a9c7; }
  .auto-filter__control:focus { border-color: var(--auto-blue); box-shadow: 0 0 0 3px #0875ff16; }
  .auto-filter__control:disabled { opacity: .55; cursor: not-allowed; background: #f4f8fd; }
  .auto-filter__range { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .auto-filter__color-row { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; min-height: 44px; }
  .auto-filter__swatch {
    width: 25px; height: 25px; border-radius: 50%; border: 2px solid #fff;
    box-shadow: 0 0 0 1px #d4e4f8; padding: 0; position: relative;
  }
  .auto-filter__swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--auto-blue); }
  .auto-filter__swatch[aria-pressed="true"]::after {
    content: "✓"; position: absolute; inset: 0; display: grid; place-items: center;
    color: #fff; font-size: 12px; text-shadow: 0 1px 3px #000;
  }
  .auto-filter__swatch[data-color="white"] { background: #fff; }
  .auto-filter__swatch[data-color="silver"] { background: #aeb9c5; }
  .auto-filter__swatch[data-color="black"] { background: #17212c; }
  .auto-filter__swatch[data-color="blue"] { background: #0865d9; }
  .auto-filter__swatch[data-color="red"] { background: #e12635; }
  .auto-filter__swatch[data-color="gray"] { background: #737d89; }
  .auto-filter__swatch-label { font-size: 10px; color: var(--auto-muted); }
  .auto-filter__advanced-panel {
    display: none; margin-top: 18px; padding-top: 18px;
    border-top: 1px solid #d5e7fc;
  }
  .auto-filter.is-expanded .auto-filter__advanced-panel { display: block; animation: autoFadeIn .18s ease-out; }
  .auto-filter__advanced-grid {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
  }
  .auto-filter__footer {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    margin-top: 20px; padding-top: 17px; border-top: 1px solid #d5e7fc;
  }
  .auto-filter__reset {
    border: 0; padding: 8px 0; display: inline-flex; align-items: center; gap: 7px;
    color: #6484ac; background: transparent; font-size: calc(16rem / 16);  font-weight: 700;
  }
  .auto-filter__actions { display: flex; align-items: center; gap: 10px; }
  .auto-filter__count { color: var(--auto-muted); font-size: 11px; }
  .auto-filter__submit {
    min-height: 45px; padding: 0 24px; display: inline-flex; align-items: center;
    justify-content: center; gap: 9px; border: 1px solid var(--auto-blue);
    border-radius: 10px; background: var(--auto-blue); color: white;
    font-size: calc(16rem / 16); font-weight: 800; box-shadow: 0 7px 18px #0875ff24;
  }
  .auto-filter__submit:hover { background: var(--auto-blue-dark); }
  .auto-filter__hint { margin: 14px 0 0; font-size: 10px; line-height: 1.5; color: #7b95b8; }

  .auction-board__days {
    margin-top: 25px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 13px;
}

.auction-card {
    position: relative;
    overflow: hidden;
    padding: 15px 20px 18px;
    border: 1px solid #dce9fc;
    border-radius: 23px;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 4px 12px rgba(40, 90, 160, .025);
    transition: transform .2s ease, box-shadow .2s ease;
}

.auction-card:hover:not(.is-empty) {
    transform: translateY(-4px);
    box-shadow: 0 12px 25px rgba(40, 100, 190, .09);
}

.auction-card::before {
    content: "";
    position: absolute;
    z-index: 0;
    bottom: -45px;
    right: -20px;
    width: 120%;
    height: 105px;
    border-radius: 50% 50% 0 0;
    background: linear-gradient(160deg, rgba(214, 231, 255, .8), rgba(239, 246, 255, .1));
    transform: rotate(-9deg);
    pointer-events: none;
}

.auction-card > * {
    position: relative;
    z-index: 1;
}

.auction-card__date {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #62718a;
    font-size: calc(14rem / 16);
    font-weight: 700;
    white-space: nowrap;
}

.auction-card__date svg {
    width: 20px;
    height: 20px;
    color: #7185a2;
    stroke-width: 2.2;
}

.auction-card__number {
    margin-top: 10px;
    color: #1d293b;
    font-size: calc(18rem / 16);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.auction-card__label {
    margin-top: 10px;
    color: #60718d;
    font-size: calc(12rem / 16);
    font-weight: 800;
    letter-spacing: .5px;
}

.auction-card__bottom {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    color: #70819a;
    font-size: 11px;
    font-weight: 600;
}

.auction-card__bottom svg {
    width: 20px;
    height: 20px;
    color: #3986ef;
    stroke-width: 2.8;
}

.auction-card.is-empty {
    border-color: #e7eaf0;
    background: rgba(248, 249, 251, .9);
}

.auction-card.is-empty::before {
    background: linear-gradient(160deg, rgba(227, 231, 238, .6), rgba(244, 246, 249, .1));
}

.auction-card.is-empty .auction-card__date,
.auction-card.is-empty .auction-card__date svg,
.auction-card.is-empty .auction-card__number,
.auction-card.is-empty .auction-card__label,
.auction-card.is-empty .auction-card__bottom,
.auction-card.is-empty .auction-card__bottom svg {
    color: #b6bfcc;
}


  @keyframes autoFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
  @media (max-width: 850px) {
    .auto-filter { padding: 19px; }
    .auto-filter__grid, .auto-filter__advanced-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .auto-filter__head { align-items: flex-start; }
  }
  @media (max-width: 540px) {
    .auto-filter { padding: 16px 13px; border-radius: 14px; }
    .auto-filter__head { gap: 8px; margin-bottom: 15px; }
    .auto-filter__title { font-size: 21px; }
    .auto-filter__subtitle { font-size: 11px; max-width: 250px; }
    .auto-filter__advanced { font-size: 0; padding-top: 3px; }
    .auto-filter__advanced svg { width: 22px; height: 22px; }
    .auto-filter__countries { gap: 7px; margin-bottom: 16px; }
    .auto-filter__country { min-height: 60px; flex-direction: column; justify-content: center; gap: 4px; padding: 7px 3px; text-align: center; }
    .auto-filter__flag { width: 27px; height: 27px; font-size: 17px; }
    .auto-filter__country-name { font-size: 11px; }
    .auto-filter__country-note { display: none; }
    .auto-filter__grid, .auto-filter__advanced-grid { gap: 12px 8px; }
    .auto-filter__label { font-size: 10px; }
    .auto-filter__control { min-height: 43px; padding: 0 9px; font-size: 11px; }
    .auto-filter__range { gap: 5px; }
    .auto-filter__color-row { gap: 7px; }
    .auto-filter__swatch { width: 23px; height: 23px; }
    .auto-filter__footer { align-items: stretch; flex-direction: column; gap: 10px; margin-top: 16px; padding-top: 13px; }
    .auto-filter__actions { justify-content: space-between; }
    .auto-filter__submit { flex: 1; padding: 0 12px; }
    .auto-filter__count { font-size: 10px; }
    .auto-filter__hint { margin-top: 10px; }
  }