:root {
    --night-sky: #2B2B46;
    --blueberry: #303150;
    --white: #FFFFFE;
    --baby-blue: #C1DDFF;
    --turquoise: #B4F1F1;
    --dodger-blue: #69ADFF;
    --steel: #7E7F90;
    --lavender: #9F7FE0;
    --cotton-candy: #FFC0DB;
    --ice-cream: #E3D6FF;
    --scan-duration: 3s;
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border-tow: rgba(255, 255, 254, 0.15);
    --glass-border: rgba(255, 255, 254, 0.1);
    --vh: 1vh;
    
}


body {
    background: linear-gradient(135deg, var(--night-sky) 0%, var(--blueberry) 100%);
    color: var(--white);
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* header */
.tops-r {
    position: inherit;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 999;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    backdrop-filter: blur(10px);
    position: relative;
    height: 60px;
    margin: 0 auto;
}
.pdf-all:hover .pdf-all-box {
    display: block;
}
.margin-auto {
    width: 100%;
    margin: 0 auto;
}
.top-a .margin-auto {
    height: 60px;
    display: flex;
    align-items: center;
}
a {
    text-decoration: none;
}
img {
    vertical-align: middle;
}
.d-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0;
    margin-bottom: 0;
}
.uppercase {
    text-transform: uppercase;
}
.top-a .pdf-all ul li span, .pdf-all span {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    background-size: 100% 100%;
    display: inline-block;
}
.pdf-all span {
    margin-right: 5px;
}
.flag-icon-ar {
    background-image: url(/images/flag/ar.svg)
}

.flag-icon-en,.flag-icon-lp {
    background-image: url(/images/flag/en.svg)
}

.flag-icon-es {
    background-image: url(/images/flag/es.svg)
}

.flag-icon-fr {
    background-image: url(/images/flag/fr.svg)
}

.flag-icon-de {
    background-image: url(/images/flag/de.svg)
}

.flag-icon-it {
    background-image: url(/images/flag/it.svg)
}

.flag-icon-pt {
    background-image: url(/images/flag/pt.svg)
}

.flag-icon-pl {
    background-image: url(/images/flag/pl.svg)
}

.flag-icon-da {
    background-image: url(/images/flag/da.svg)
}

.flag-icon-nl {
    background-image: url(/images/flag/nl.svg)
}

.flag-icon-fi {
    background-image: url(/images/flag/fi.svg)
}

.flag-icon-cs {
    background-image: url(/images/flag/cs.svg)
}

.flag-icon-sv {
    background-image: url(/images/flag/sv.svg)
}

.flag-icon-no {
    background-image: url(/images/flag/no.svg)
}

.flag-icon-ro {
    background-image: url(/images/flag/ro.svg)
}

.flag-icon-ru {
    background-image: url(/images/flag/ru.svg)
}

.flag-icon-el {
    background-image: url(/images/flag/el.svg)
}

.flag-icon-id {
    background-image: url(/images/flag/id.svg)
}

.flag-icon-zh-cn {
    background-image: url(/images/flag/zh-cn.svg)
}

.flag-icon-ja {
    background-image: url(/images/flag/ja.svg)
}

.flag-icon-ko {
    background-image: url(/images/flag/ko.svg)
}

.flag-icon-th {
    background-image: url(/images/flag/th.svg)
}

.flag-icon-tr {
    background-image: url(/images/flag/tr.svg)
}

.flag-icon-vn {
    background-image: url(/images/flag/vn.svg)
}

.flag-icon-hr {
    background-image: url(/images/flag/hr.svg)
}

.flag-icon-et {
    background-image: url(/images/flag/et.svg)
}

.flag-icon-hu {
    background-image: url(/images/flag/hu.svg)
}

.flag-icon-ie {
    background-image: url(/images/flag/ie.svg)
}

.flag-icon-sk {
    background-image: url(/images/flag/sk.svg)
}
.pdf-all-box {
    position: fixed;
    display: none;
    top: 25px;
    right: 40px;
}
.pdf-allBox-top {
    transform: translate(-25px, 10px);
    display: flex;
    justify-content: flex-end;
}
svg:not(:root) {
    overflow: hidden;
}
.pdf-all-hide {
    top: 100%;
    left: 5%;
    box-shadow: 0 0 7px 1px rgb(0 0 0 / 12%);
    border: 1px solid #fff;
    padding: 10px !important;
    top: 10px;
    margin-top: 5px !important;
    border-radius: 6px;
    max-height: 83vh;
    overflow-y: auto;
    display: flex !important;
    flex-wrap: wrap;
    width: 200px;
    background-color: #ffffff;
    background: #2C2C48;
    border: 1px solid rgba(180, 241, 241, 0.1);
    transition: border 0.3s 
ease;
    border-radius: 12px;
}
.pdf-all ul li {
    line-height: 20px;
    width: 100%;
    color: #D4D4D4;
}
.pdf-all-hide li a {
    font-size: 15px;
    color: #fff;
    display: inline-flex;
    align-items: center;
    height: 100%;
    width: 100%;
    padding: 10px;
    text-align: left;
    font-weight: 400 !important;
    height: auto !important;
}
.top-a .pdf-all ul li span, pdf-all span {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    background-size: 100% 100%;
    display: inline-block;
}
.top-a .pdf-all {
    padding: 0 8px;
    border: 1px solid #293545;
    height: 30px;
    margin-right: 10px;
    line-height: 25px;
    border-radius: 5px;
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: #fff;
}

/* end header */

.main-container {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 10px;
    max-width: 1800px;
    margin: 0 auto;
    padding: 20px 0;
    width: 98%;
}

.ad-sidebar {
    width: 340px;
    padding: 10px;
}
.ad_box{
    margin: 10px;
    text-align: center;
}
.mian_left,.main_right{
    background: rgba(48, 49, 80, 0.4);
    border: 1px solid rgba(255, 255, 254, 0.1);
    border-radius: 12px;
}

.sticky-wrapper {
    position: sticky;
    top: 20px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
/* food */
.foot {
    padding: 0 0 28px 0;
    /* background: #000; */
    overflow: hidden;
    /* background: #dfdfdf; */
    background: linear-gradient(135deg, var(--night-sky) 0%, var(--blueberry) 100%);
    padding: calc(20px + 2%) 0 calc(0px + 2%);
    color: #fff;
    font-size: 13px;
}
.margin-auto {
    width: 100%;
    margin: 0 auto;
}
.foot .lo {
    float: left
}

.foot span {
    font-size: 11px !important;
    color: #d3d0d0;
    margin-top: 12px;
    display: block;
    width: 100%;
    text-align: left;
}


.foot ul li {
    margin-left: 30px;
    position: relative;
    padding: 5px 0;
    list-style: none;
    margin-top: 13px;
}

.foot ul a {
    font-size: 13px;
    color: #ffae2e
}

.ul_top{
    display: flex;
    justify-content: space-between;
    justify-content: center;
    padding-top: 35px;
    max-width: 1200px;
    margin: 0 auto;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    padding-bottom: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.ul_top ul{
   margin: 0 45px;
}
.ul_top ul:nth-child(1){
    margin: 0;
    width: 30%;
}
.f_text{
    max-width: 1200px;
    margin: 0 auto;
    padding: 5px;
}
.info_text{
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 25px;    
}
.foot ul a {
    font-size: 13px;
    color: #e5e3e3;
}
.social-icons a {
    margin: 0 10px;
}
.social-icons{
    display: flex;
}

/* end food */

@media (max-width: 1024px) {
    .main-container {
        grid-template-columns: 1fr;
        padding: 0;
    }
    .ad-sidebar {
        width: 100%;
        max-width: 310px;
        margin: 0 auto;
    }
}

.glass-card {
    background: rgba(48, 49, 80, 0.4);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    backdrop-filter: blur(10px);
}

.carrier-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(180, 241, 241, 0.2);
    backdrop-filter: blur(20px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    border-radius: 16px;
}

.how-to-card {
    background: rgba(255, 255, 254, 0.03);
    border: 1px solid rgba(180, 241, 241, 0.1);
    transition: border 0.3s ease;
    border-radius: 12px;
}

.how-to-card:hover {
    border-color: var(--turquoise);
}

.search-container {
    position: relative;
    box-shadow: 0 0 50px rgba(105, 173, 255, 0.1);
    transition: box-shadow 0.3s ease;
}

.search-container:focus-within {
    box-shadow: 0 0 70px rgba(105, 173, 255, 0.25);
}

input {
    background: var(--glass-bg) !important;
    border: 1px solid rgba(189, 189, 203, 0.2) !important;
    color: var(--white) !important;
    backdrop-filter: blur(10px);
    padding: 12px;
    border-radius: 8px;
}

input:focus {
    border-color: var(--dodger-blue) !important;
    outline: none;
}

.tag {
    background: rgba(126, 127, 144, 0.2);
    border: 1px solid rgba(255, 255, 254, 0.1);
    transition: all 0.2s;
    cursor: pointer;
    padding: 4px 12px;
    border-radius: 20px;
}

.tag:hover {
    background: var(--dodger-blue);
    color: var(--night-sky);
    border-color: var(--dodger-blue);
}

.btn-base {
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-track {
    background: linear-gradient(135deg, var(--turquoise) 0%, var(--dodger-blue) 100%);
    color: var(--night-sky);
}

.btn-track:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}

.btn-start {
    transition: all 0.3s ease;
    display: flex;
    width: max-content;
    margin: 0 auto;
    background: linear-gradient(135deg, var(--dodger-blue) 0%, var(--turquoise) 100%);
    color: var(--night-sky);
    box-shadow: 0 10px 20px rgba(105, 173, 255, 0.2);
}

.btn-start:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(159, 127, 224, 0.5);
}

.btn-confirm {
    background: linear-gradient(135deg, var(--dodger-blue) 0%, var(--turquoise) 100%);
    color: var(--night-sky);
    box-shadow: 0 10px 20px rgba(105, 173, 255, 0.2);
}

.btn-confirm:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

/* .hero-title {
    background: linear-gradient(to right, var(--white), var(--baby-blue));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
} */

.ad-container, .ad-slot-300-600 {
    /* background: rgba(189, 189, 203, 0.05); */
    /* border: 1px dashed var(--steel); */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    text-align: center;
    
}

.ad-container {
    min-height: 90px;
}
.ad-placeholder {
    font-size: 16px;
    color: #888;
    font-style: italic;
    text-align: center;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 auto;
    margin-top: 30px;
    max-width: 750px;
}
.ad-placeholder::before, .ad-placeholder::after {
    content: "";
    flex: 1;
    border-bottom: 1px dashed #888;
}

.ad-slot-300-600 {
    width: 300px;
    height: 600px;
    margin: 0 auto;
}
.main-content{
    min-height: calc(100vh - 70px);
}

.ad-label, .ad-tag {
    position: absolute;
    background: var(--night-sky);
    color: var(--steel);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 2px 8px;
}
#right a{
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}
#right{
    cursor: pointer;
}
.ad-label { top: -20px; left: 20px; }
.ad-tag { top: 0; left: 0; }

.timeline-dot {
    width: 12px; height: 12px;
    background: var(--blueberry);
    border: 2px solid var(--steel);
    position: absolute; left: -7px; top: 5px;
    border-radius: 50%;
}

.latest .timeline-dot {
    background: var(--turquoise);
    border-color: var(--turquoise);
    box-shadow: 0 0 12px var(--turquoise);
}

.waiting-text::after {
    content: '...';
    animation: blink 1.5s infinite;
}

@keyframes blink {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}
.pulse-ring {
    border: 2px solid var(--turquoise);
    animation: pulse 2s infinite;
    border-radius: 50%;
}
.hide{
    display: none;
}
.p90{
    padding-top: 90px;
}
#long-features img{
    margin: 0 auto;
    display: block;
}
.logo_icon img{
    height: 55px;
    width: auto;
}
.modal_icon{
    display: flex;
    justify-content: center;
}
.w-full-c{
    margin: 10px auto;
}
.cblock{
    font-size: 14px;
    text-align: left;
    margin: 5px;
}
@keyframes pulse {
    0% { transform: scale(0.9); opacity: 1; }
    70% { transform: scale(1.3); opacity: 0; }
    100% { transform: scale(0.9); opacity: 0; }
}
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 35px 20px;
    /* background-color: #f5f5f5; */
    border-radius: 10px;
    margin-top: 20px;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(10px);
    transition: 0.3s;
}
.feature-icon {
    display: flex;
    justify-content: center;
    align-items: center;
}
.feature-icon img {
    width: 80px;
}
.feature-item h3 {
    margin: calc(25px + 1%) 0 calc(15px + 1%);
    font-size: calc(14px + 3 * (100vw - 320px) / 1080);
    font-weight: bold;
    text-align: center;
}
.feature-item p {
    line-height: 1.4;
    margin-bottom: calc(20px + 1%);
    font-size: 15px;
    text-align: center;
    color: var(--steel);
}
.feature-icon svg {
    background-color: #ffffff;
    border-radius: 15px;
}
   /* 弹出框容器 */
   .modal {
    width: 90%;
    max-width: 500px;
    border-radius: 12px;
    padding: 40px;
    text-align: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(180, 241, 241, 0.2);
    backdrop-filter: blur(20px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 10;
    margin: 0 auto;
    margin-top: 60px;
}
.m800{
    max-width: 900px;
}

/* 动态扫描进度条 */
.scan-container {
    margin: 30px 0;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #FFC0DB, var(--dodger-blue), var(--turquoise));
    background-size: 200% 100%;
    box-shadow: 0 0 15px var(--dodger-blue);
    animation: 
        fillProgress var(--scan-duration) forwards ease-in-out,
        shimmer 2s infinite linear;
}

@keyframes fillProgress {
    to { width: 100%; }
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.status-text {
    font-size: 1.5rem;
    color: var(--dodger-blue);
    font-weight: bold;
    letter-spacing: 2px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

/* 隐藏结果，扫描完后显示 */
.results-area {
    opacity: 0;
    transform: translateY(20px);
    animation: showResults 0.5s calc(var(--scan-duration) + 1s) forwards;
}

@keyframes showResults {
    to { opacity: 1; transform: translateY(0); }
}

/* 运营商选项列表 */
.carrier-options {
    display: flex;
    /* flex-direction: column; */
    gap: 12px;
    margin-top: 25px;
    justify-content: space-between;
}

.carrier-item {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    padding: 18px 25px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: 0.3s;
    width: 33%;
}

.carrier-item:hover {
    background: rgba(105, 173, 255, 0.15);
    border-color: var(--dodger-blue);
    transform: translateX(5px);
}

.carrier-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.carrier-info i {
    font-size: 1.5rem;
    color: var(--turquoise);
}
.carrier-name{
    text-align: left;
    font-weight: 700;
}
.carrier-info img{
    width: 30px;
    height: 30px;
    border-radius: 5px;
}
.container{
    max-width: 1300px;
    margin: 0 auto;
}
.nlp_box {
    display: flex;
    flex-wrap: wrap;
    padding: 40px 0;
}
.nlp_box a {
    background-color: rgba(255, 255, 254, 0.03) !important;
    color: #fff !important;
    box-shadow: 0 0 2px 1px rgb(0 0 0 / 10%);
    font-size: 13px !important;
    text-align: center;
}
.cit{
    display: none;
}
.badge-match {
    font-size: 10px;
    background: var(--dodger-blue);
    color: var(--night-sky);
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: bold;
}

.btn-continue {
    margin-top: 30px;
    width: 100%;
    padding: 18px;
    border: none;
    border-radius: 16px;
    font-weight: 900;
    font-size: 1rem;
    cursor: pointer;
    transition: 0.3s;

    background: linear-gradient(135deg, var(--dodger-blue) 0%, var(--turquoise) 100%);
    color: var(--night-sky);
    box-shadow: 0 10px 20px rgba(105, 173, 255, 0.2);
}

.btn-continue:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}
.continue_btn{
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    margin-top: 35px;
    justify-content: center;
    align-items: center;
    font-size: 25px;
    text-decoration: none;
    padding: 19px 0;
    /* text-transform: uppercase; */
    max-width: 395px;
}
.continue_btn svg{
    margin-left: 5px;
}
.continue_btn svg path{
    fill: #2e2d2d;
}
.scan-wrapper {
    animation: fadeOut 0.4s calc(var(--scan-duration) + 0.5s) forwards;
    position: absolute;
    left: 2%;
    top: 10px;
    text-align: center;
    width: 95%;
}
.howto_title {
    font-size: 13;
    text-align: center;
}
.ads_left {
    text-align: center;
    margin:  0 auto;
}
.blog_list ul li{
    min-height: auto !important;
}
.result_bl ul li a{
    border-radius: 6px !important;
    border: none !important;
}
.blog_list ul li a{
    padding: 6px;
    color: #fff;
    font-size: 15px;
    display: inline-block;
    padding: 5px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    margin: 6px 0;
    width: 100%;
    display: flex;
    /* font-weight: 700; */
    background: rgba(255, 255, 254, 0.03);
    border: 1px solid rgba(180, 241, 241, 0.1);
    transition: border 0.3s ease;
    border-radius: 12px;
}
.blog_list ul li a span{
    color: #fff;
    border-radius: .4rem;
    font-weight: 700;
    font-size: 25px;
    color: var(--dodger-blue);
    line-height: 28px;
    display: inline-block;
    width: 35px;
    min-width: 35px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    display: block;
    margin-right: 10px;
}
.blog_list ul li a:hover{
    text-decoration: none;
    transform: scale(1.01);
    border-color: var(--turquoise);
}
.result_bl{
    border: 1px solid #b0b0b0;
    width: 98%;
    margin: 10px auto;
    border-radius: 5px;
    padding: 5px;
}
.howto_content{
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 20px;
    flex-wrap: wrap;
}
@keyframes fadeOut {
    to { height: 0; opacity: 0; margin: 0; overflow: hidden; }
}

/* 进度条容器 */


.circular-progress {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 0 auto 20px;
}

.progress-ring {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
}

.progress-ring-circle-bg {
    fill: none;
    stroke: rgba(255, 255, 254, 0.1);
    stroke-width: 8;
}

.progress-ring-circle {
    fill: none;
    stroke: url(#gradient);
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.1s ease-out;
}

.progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 28px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--turquoise) 0%, var(--dodger-blue) 50%, var(--baby-blue) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 1px;
    white-space: nowrap;
}

.loading-text {
    color: var(--white);
    font-size: 15px;
    margin-top: 15px;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.dot-animation {
    color: var(--turquoise);
    font-weight: 600;
}

.dot-animation::after {
    content: '...';
    animation: blink 1.5s infinite;
}

/* 更新渐变定义以匹配模板颜色 */
#gradient stop:nth-child(1) {
    stop-color: var(--cotton-candy);
    stop-opacity: 1;
}

#gradient stop:nth-child(2) {
    stop-color: var(--dodger-blue);
    stop-opacity: 1;
}

#gradient stop:nth-child(3) {
    stop-color: var(--turquoise);
    stop-opacity: 1;
}

.find_box {
    position: relative;
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.search-content-text {
    text-align: center;
    color: var(--white);
    font-size: 14px;
    font-weight: 500;
}

.search-content-text span:first-child {
    color: var(--steel);
    margin-right: 8px;
}

.search-content-text span:last-child {
    color: var(--turquoise);
    font-weight: 700;
    font-size: 16px;
}
.main-layout {
    display: grid;
    grid-template-columns: 1fr 310px;
    gap: 24px;
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}

.content-card {
    background: var(--glass);
    backdrop-filter: blur(20px);
    border-radius: 32px;
    padding: 25px;
    position: relative;
}

/* 状态横幅 */
.status-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    border-bottom: 1px solid var(--glass-border);
    padding-bottom: 30px;
}

.status-badge {
    background: var(--dodger-blue);
    color: var(--night-sky);
    padding: 5px 15px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.timeline {
    position: relative;
    margin-top: 30px;
}

/* .timeline-item {
    position: relative;
    padding-left: 35px;
    padding-bottom: 40px;
    border-left: 2px solid var(--glass-border);
} */

/* .timeline-item::before {
    content: '';
    position: absolute;
    left: -7px;
    top: 5px;
    width: 12px;
    height: 12px;
    background: var(--blueberry);
    border: 2px solid var(--steel);
    border-radius: 50%;
} */

.timeline-item.active::before {
    background: var(--turquoise);
    border-color: var(--turquoise);
    box-shadow: 0 0 15px var(--turquoise);
}

.timeline-lock-container {
    position: relative;
    padding-left: 20px;
    padding-right: 10px;
}

.gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-height: 250px;
    background: linear-gradient(to bottom, transparent 0%, var(--night-sky) 90%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 20px;
    z-index: 10;
    height: 250px;
    display: none;
}

.loading_s{
    display: flex;
    justify-content: center;
    align-items: center;
}

.unlock-btn {
    background: var(--dodger-blue);
    color: var(--night-sky);
    padding: 18px 40px;
    border-radius: 50px;
    font-weight: 900;
    cursor: pointer;
    border: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    transition: 0.3s;
    display: flex;
    align-items: center;
    gap: 12px;
}

.unlock-btn:hover {
    transform: scale(1.05);
    background: var(--turquoise);
}

.unlock-btn img {
    color: #FF4757;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}
.search_result_box{
    display: flex;
    flex-direction: column;
    height: calc(100vh - 90px);
}
.content-card{
    flex-grow: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0; /* Important for flex children to allow shrinking */
}
.content-card .timeline-lock-container{
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0; /* Important for flex children to allow shrinking */
}
.content-card .timeline-lock-container::-webkit-scrollbar{
    width: 8px;
}

.content-card .timeline-lock-container::-webkit-scrollbar-track{
    background: rgba(43, 43, 70, 0.3);
    border-radius: 10px;
}

.content-card .timeline-lock-container::-webkit-scrollbar-thumb{
    background: linear-gradient(135deg, rgba(105, 173, 255, 0.6) 0%, rgba(180, 241, 241, 0.5) 100%);
    border-radius: 10px;
    border: 1px solid rgba(43, 43, 70, 0.2);
}

.content-card .timeline-lock-container::-webkit-scrollbar-thumb:hover{
    background: linear-gradient(135deg, rgba(180, 241, 241, 0.7) 0%, rgba(105, 173, 255, 0.7) 100%);
}
.content-card .status-header{
    flex-shrink: 0;
}
.content-card h3{
    flex-shrink: 0;
    margin-bottom: 20px;
    letter-spacing: 1px;
    font-size: 14px;
    color: var(--steel);
    text-transform: uppercase;
}
.ad_box{
    flex-shrink: 0;
    margin-top: 20px;
}
.btn-main { 
    background: linear-gradient(135deg, var(--dodger-blue), var(--turquoise));
    color: var(--night-sky); border: none; padding: 15px 35px; border-radius: 18px; 
    font-weight: 900; cursor: pointer; transition: 0.3s;
}
.btn-main:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(105, 173, 255, 0.4); }

#page-results { display: grid; grid-template-columns: 1fr 310px; gap: 30px; padding: 40px 0; }
.main-card { background: var(--glass); border: 1px solid var(--glass-border); border-radius: 30px; padding: 40px; position: relative; overflow: hidden; }
.timeline { margin-top: 30px; }
.timeline-item {  padding: 0 0 30px 0px; position: relative; }
/* .timeline-item::after { content: ''; position: absolute; left: -7px; top: 5px; width: 12px; height: 12px; background: var(--dodger-blue); border-radius: 50%; } */

.lock-overlay {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 250px;
    background: linear-gradient(to bottom, transparent, var(--night-sky) 95%);
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 50px;
}

.overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(48, 49, 80, 0.97);
    border: 1px solid rgba(255, 255, 254, 0.1);
    display: none; align-items: center; justify-content: center; z-index: 999999999999;
}
.notbg{
    background: transparent;
}
.trophy-box { height: 120px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
  /* 进度条 */
  .progress-container { height: 6px; background: rgba(255,255,255,0.1); border-radius: 10px; margin: 20px 0; overflow: hidden; }
  .progress-fill { height: 100%; width: 0%; background: var(--dodger-blue); transition: width 0.05s linear; }

  /* --- 奖杯动画 --- */
  .fa-trophy {
      font-size: 80px; color: var(--gold); opacity: 0;
      filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.4));
  }
  .trophy-animate {
      animation: trophyDrop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  }
  @keyframes trophyDrop {
      0% { transform: translateY(-150px) scale(0.5); opacity: 0; }
      60% { transform: translateY(0) scale(1.2); opacity: 1; }
      100% { transform: translateY(0) scale(1); opacity: 1; }
  }

  /* --- 粒子 --- */
  .particle { position: absolute; pointer-events: none; z-index: 2000; font-size: 14px; }
  @keyframes particleBurst {
      0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
      100% { transform: translate(var(--tx), var(--ty)) rotate(var(--tr)); opacity: 0; scale: 0.5; }
  }

  .app-download-buttons{
    display: none;
  }


  .faq-hero {
    text-align: center;
    padding: 80px 0 60px;
    background: radial-gradient(circle at center, rgba(59, 130, 246, 0.1), transparent);
}
.faq-hero h1 { font-size: 42px; margin-bottom: 30px; font-weight: 900; }
.faq-hero h1 span { color: var(--cyan); }

.faq-search-wrapper {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
}
.faq-search-wrapper i {
    position: absolute; left: 25px; top: 50%;
    transform: translateY(-50%);
    color: var(--cyan); font-size: 18px;
}
.faq-search-input {
    width: 100%;
    background: var(--glass);
    padding: 20px 20px 20px 65px;
    border-radius: 20px;
    color: #fff;
    font-size: 16px;
    outline: none;
    backdrop-filter: blur(10px);
    transition: 0.3s;
    outline: none;
    border-color: var(--dodger-blue) !important;
    outline: none;
    box-shadow: 0 0 70px rgba(105, 173, 255, 0.25);
}
.faq-search-input:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 20px rgba(74, 222, 255, 0.2);
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 60px;
}
.cat-card {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    padding: 25px 15px;
    border-radius: 20px;
    text-align: center;
    cursor: pointer;
    transition: 0.3s;
}
.cat-card:hover { background: rgba(255,255,255,0.08); border-color: var(--dodger-blue); }
.cat-card i { font-size: 24px; color: var(--cyan); margin-bottom: 12px; display: block; }
.cat-card span { font-size: 13px; font-weight: bold; }

.faq-list { margin-bottom: 30px; }
.faq-item {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: 15px;
    margin-bottom: 15px;
    overflow: hidden;
    transition: 0.3s;
}
.faq-question {
    padding: 22px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: bold;
}
.faq-question:hover { color: var(--cyan); }
.faq-question i { 
    transition: 0.3s; color: var(--text-gray); font-size: 14px;
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    padding: 0 30px;
    color: var(--text-gray);
    font-size: 14px;
    background: rgba(0,0,0,0.1);
    transition: max-height 0.3s ease-out, padding 0.3s;
}
/* 展开状态 */
.faq-item.active { border-color: var(--dodger-blue); }
.faq-item.active .faq-answer { max-height: 200px; padding: 20px 30px 30px; }
.faq-item.active .faq-question i { transform: rotate(180deg); color: var(--cyan); }
#submit_search {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 9;
    display: block;
    margin: 0;
    padding: 0;
    width: 66px;
    height: 66px;
    background-color: transparent;
    text-align: center;
    line-height: 66px;
    opacity: .5;
    -webkit-transition: all .3s 
linear;
    -moz-transition: all .3s linear;
    -ms-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s 
linear;
    border: none;
}
.getbg{
    background: rgba(0, 0, 0, 0.6);
}
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin:  0 0 24px 0;
    font-family: Arial, sans-serif;
}
.pagination .page-link {
    display: inline-block;
    padding: 6px 14px;
    margin: 0 2px;
    border-radius: 4px;
    background: #f5f7fa;
    color: #007bff;
    border: 1px solid #e0e0e0;
    text-decoration: none;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    font-size: 15px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.pagination .page-link:hover {
    background: #007bff;
    color: #fff;
    border-color: #007bff;
}
.pagination .current {
    background: #007bff;
    color: #fff;
    border-color: #007bff;
    font-weight: bold;
    cursor: default;
    box-shadow: 0 2px 6px rgba(0,123,255,0.08);
}
.pagination .page-link[disabled],
.pagination .page-link.disabled {
    background: #f5f7fa;
    color: #ccc;
    border-color: #e0e0e0;
    cursor: not-allowed;
    pointer-events: none;
}
.pack_btn{
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 999;
    /* background-color: rgba(0, 0, 0, .85);
    backdrop-filter: blur(10px); */
    outline: none;
    /* box-shadow: 0 0 70px rgba(105, 173, 255, 0.25); */
    /* width: 99%; */
    margin: 0 auto;
    background-color: #fff;
}
.pack_btn a{
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 15px 15px;
    width: 98%;
    display: block;
    text-align: center;
    color: #fff;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* color: var(--night-sky); */
    border-radius: 5px;
    font-weight: 700;
    /* background: linear-gradient(135deg, var(--turquoise) 0%, var(--dodger-blue) 100%); */
    animation: breathe 1.5s infinite;
    background-color: #1a73e8;
    border-radius: 8px;
}
.pack_des{
    text-align: center;
}
.bnt_box{
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 10px;
}

@keyframes breathe {
    0% {
        box-shadow: 0 0 0 0  #1a73e8;
    }
    50% {
        box-shadow: 0 0 0 3vw rgba(188, 204, 238, 0);
    }
    100% {
        box-shadow: 0 0 0 3vw rgba(62, 111, 218, 0);
    }
}
.gray_c{
    background: transparent;
    border: 1px solid;
}
#center_box{
    border-color: var(--dodger-blue) !important;
    outline: none;
    box-shadow: 0 0 70px rgba(105, 173, 255, 0.25);
}
.mo{
    margin-top: 0;
}
.fontSize{
    font-size: 23px;
}
.ads_div_right{
    max-width: 980px;
    margin: 0 auto;
}
.list_top {
    padding: 10px 0;
}
.list_content {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0px 0 30px 0;
}
.list_top_title {
    text-align: center;
    font-size: 38px;
    padding: 0px 0 30px 0;
    padding-bottom: 10px;
}
.list_top_des {
    padding-bottom: 30px;
    text-align: center;
    font-size: 18px;
    margin-top: 10px;
    margin-bottom: 10px;
    color: var(--steel);
}
.track-carriers {
    max-width: 1300px;
    padding: 0 22px;
    margin: 20px auto 20px auto;
}
.tab-main-content {
    font-size: 14px;
}
.tabs {
    border-bottom: 1px solid #ddd;
    width: 100%;
}

.clearboth {
    clear: both;
    height: 39px;
    line-height: 39px;
}
.tab-content {
    clear: both;
    width: 100%;
}
.tab-content a{
	background-color: #fff;
    border-radius: 0;
    height: 98px;
    float: left;
    line-height: 60px;
    text-decoration: none;
    color: #000;
    /* margin-top:3%; */
    width: 24%;
    margin: .5%;
    margin-bottom: 10px;
    background: rgba(255, 255, 254, 0.03);
    border: 1px solid rgba(180, 241, 241, 0.1);
    transition: border 0.3s 
ease;
    border-radius: 12px;

}
.tab-content a:hover{
    border-color: var(--turquoise);
}
.tab-content img{
	width: 60px;
	height:60px;
}
.tab-contenta{
	clear: both;
	width: 100%;
}
.tab-contenta a{
	background-color: #fff;
    border: 1px solid #dedede;
    border-radius: 5px;
    height: 61px;
    float: left;
    line-height: 60px;
    padding: 7px;
    text-decoration: none;
    color: #000;
    margin-top:3%;
}
.tab-contenta img{
	width: 60px;
	height:60px;
}
.tab-content-div1{
    margin-right: 10px;
    width: 106px;
    height: 98px;
    float: left;
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 8px;
}
.tab-content-div2{
	height: 75px;
    vertical-align: middle;
    overflow: hidden;
    zoom: 1;
    display: flex;
    align-items: center;
}
.tab-content-div2 p{
	word-break:break-word;line-height: 20px;
    color: #fff;
}
.tab-content-div2a{
	height: 61px;
    vertical-align: middle;
    display: table-cell;
    overflow: hidden;
    zoom: 1;
}
.tab-content-div2a p{
	word-break:break-word;line-height: 20px;
}
.clearboth{
	clear: both;
}

.tabs{ border-bottom: 1px solid #ddd ;width: 100%;}
.tabs::before,.tabs::after{display:table;content: "";clear: both;line-height: 0;}
.tabs li{float:left;margin-bottom: -1px;overflow: hidden;position: relative;}
.tabs li a {
    display: block;padding: 10px 14px; border-radius: 4px 4px 0 0; outline: none;height:39px;line-height:18px; text-decoration: none;
    background: rgba(255, 255, 254, 0.03);
    border: 1px solid rgba(180, 241, 241, 0.1);
    transition: border 0.3s 
ease;
}
.thistab,.thistab a,.thistab a:hover,.thistab a:focus{color: #fff !important;}
.tabs li a:hover,.tabs li a:focus{ border-color: var(--turquoise); text-decoration: none;}
.thistab a{border-color: #ddd #ddd transparent !important; border-width:1px !important; border-style:solid;color: #fff !important; text-decoration: none !important;}
#index .tabs li a{
  color: #000;
}
.timeline-item{
    display: flex;
}
.i_l {
    width: 45px;
    height: 45px;
    text-align: center;
    font-size: 14px;
    border-radius: 5px;
    margin-right: 15px;
    position: relative;
    padding: 3px;
    font-weight: 700;
    background: rgba(255, 255, 254, 0.03);
    border: 1px solid rgba(180, 241, 241, 0.1);
}
.g_icon {
    position: absolute;
    right: 0px;
    top: 0px;
}
.i_l::before {
    content: '';
    position: absolute;
    top: calc(100% + 13px);
    left: calc(50% - 8px);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #909398;
    margin: 0px;
}
.i_l::after {
    content: "";
    position: absolute; 
    left: 50%;
    top: 100%;
    width: 1px;
    height: 30px;
    background-color: #909398;
}
.itemline-right{
    width: calc(100% - 45px);
}
.i_l_t,.i_l_m{
    font-size: 12px;
}
@media (max-width: 600px) {
    .category-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width:768px) {
    .tabs {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE and Edge */
        white-space: nowrap;
        border-bottom: 1px solid #ddd;
        width: 100%;
        max-width: 100%;
    }
    .tabs::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }
    .tabs::before,
    .tabs::after {
        display: none;
    }
    .tabs li {
        float: none;
        display: inline-flex;
        flex-shrink: 0;
        margin-bottom: -1px;
        white-space: nowrap;
    }
    .tabs li a {
        white-space: nowrap;
        flex-shrink: 0;
    }
    .tab-content-div1{
        width: 84px;
        height: 84px;
    }
    .tab-content a{
        height: 84px;
    }
    .track-carriers{
        padding: 0;
        overflow: hidden;
    }
    .tab-main-content {
        overflow: hidden;
        width: 100%;
    }
    .tab-content a {
        width: 100% !important;
        margin-left: 0%;
    }
    .list_top_title{
        font-size: 24px;
    }
    .ad_box{
        margin: 0 auto !important;
        margin-top: 5px !important;
        margin-bottom: 5px !important;
        width: 98%;
    }
    .status-text{
        font-size: 1.2rem;
    }
    .ad-placeholder{
        margin-top: 0;
    }
    .carrier-item{
        width: 48%;
    }
    #main-content {
        min-height: calc(var(--vh, 1vh) * 100 - 110px);
        height: auto;
        width: 100%;
    }
  .app-download-buttons{
    display: flex;
    justify-content: space-between;
    gap: 10px;
  }
  .howto_title{
    margin: 0;
  }
  .modal{
      min-height: auto;
  }
    .text-4xl{
        font-size: 30px;
    }
    .px-10{
        padding: 15px;
    }
    .ad-sidebar{
        width: 100%;
        max-width: 100%;
    }
    .carrier-item{
        padding: 5px;
    }
    .modal{
        margin-top: 0;
        width: 98%;
        padding: 10px;
    }
    .mian_left{
        border: 0;
    }
    .content-card{
        padding: 10px;
    }
    .hero-title{
        font-size: 26px;
        margin-bottom: 5px;
    }
    .home_box .hero-title{
        font-size: 17px;
        line-height: 18px;
        padding: 8px 0;
        margin-bottom: 5px;
    }
    .mb-12{
        margin-bottom: 15px;
    }
    .tops-r{
        max-width: 95rem;
        padding: 10px;
    }
    .p90{
        padding-top: 10px;
        padding-left: 10px;
        padding-right: 10px;
    }
    .continue_btn{
        padding: 10px;
        margin-top: 25px;
    }
    .features-grid{
        grid-template-columns: repeat(1, 1fr);
    }
    .nlp_box a{
        width: 47%;
    }
    /* .m800{
        height: 94%;
    } */
    .py-32{
        padding: 10px;
    }
    .circular-progress {
        width: 120px;
        height: 120px;
        margin: 0 auto 15px;
    }
    .progress-text {
        font-size: 24px;
    }
    .mb-8{
        margin-bottom: 18px;
    }
    .loading-text {
        font-size: 14px;
        margin-top: 12px;
    }
    .find_box {
        min-height: 220px;
        padding: 15px;
    }
    .btn-start{
        font-size: 15px;
        padding: 15px;
    }
    .foot_img{
        height: 53px !important;
        width: auto;
    }
    .ul_top ul:nth-child(1){
        width: auto;
    }
    .ul_top ul{
        margin: 0;
        width: 45%;
    }
    .search_result_box_vw{
        height: auto !important;
    }
    .search_result_box_vw .content-card .timeline-lock-container{
        overflow: inherit;
    }
    .search_result_box{
        border: 1px solid rgba(180, 241, 241, 0.2);
        border-color: var(--dodger-blue) !important;
        outline: none;
        box-shadow: 0 0 70px rgba(105, 173, 255, 0.25);
    }
    .content-card h3{
        margin-bottom: 0 !important;
    }
    .status-header{
        padding-bottom: 10px;
        margin-bottom: 10px;
    }
    .status-header h1{
        font-size: 18px !important;
    }
    .logo_icon img{
        height: 30px;
        width: auto;
    }
    .timeline-lock-container{
        padding: 0 10px;
    }
    .timeline{
        margin-top: 10px;
    }
    .badge-match{
        display: none;
    }
    .carrier-name{
        font-size: 13px;
    }
    .gap-20{
        gap: 20px;
    }
    .ad-placeholder{
        margin-top: 0;
    }
    .text-3xl{
        font-size: 25px;
    }
    .top-a .margin-auto,.tops-r{
        height: 30px;
    }
    .faq-hero h1{
        font-size: 27px;
    }
    .faq-hero,.faq-list{
        padding: 10px;
    }
    .text-lg{
        font-size: 1rem;
        line-height: 20px;
    }
    .gradient-overlay{
        top: -75px;
    }

    .main_right,.main_left{
        border-color:rgba(105, 173, 255, 0.3) !important;
        outline: none;
        box-shadow: 0 0 25px 10px rgba(105, 173, 255, 0.3);
    }
    .mian_left .modal{
        border-color:rgba(105, 173, 255, 0.3) !important;
        outline: none;
        box-shadow: 0 0 25px 10px rgba(105, 173, 255, 0.3);
    }
}