.value-multiline {
          list-style: none;
          padding-left: 0;
          margin: 0;
        }
        
        .value-multiline li {
          position: relative;
          padding-left: 1.2em;
          margin-bottom: 0.5em;
        }
        
        .value-multiline li:before {
          content: "-";
          position: absolute;
          left: 0;
        }
        .analysis-row {
            display: flex;
            flex-wrap: wrap;
        }

        .result-section {
            width: 50%;
            padding: 0px 0px 0px 0px;
        }



        .result-section h3 {
            font-size: 18px;
            margin-bottom: 15px;
            color: #2c3e50;
            font-weight: 600;
            display: flex;
            align-items: center;
        }

        .result-section h3:before {
            content: "";
            display: inline-block;
            width: 4px;
            height: 18px;
            background: #3498db;
            margin-right: 10px;
            border-radius: 2px;
        }

        .analysis-card {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            border-left: 4px solid #3498db;
            display: flex;
            align-items: center;
            min-height: 100px;
        }

        .analysis-card p {
            margin: 0;
            color: #555;
            line-height: 1.6;
        }


        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        @media (max-width: 768px) {
            .analysis-row {
                flex-direction: column;
            }

            .result-section {
                min-width: 100%;
            }
        }
        /* 为WHOIS信息区域添加固定尺寸和滚动条样式 */
        #whois {
            width: 100%;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 10px;
            font-family: monospace;
            font-size: 12px;
            line-height: 1.4;
            word-wrap: break-word;
        }

        /* 自定义滚动条样式 */
        #whois::-webkit-scrollbar {
            width: 8px;
        }

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

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

        #whois::-webkit-scrollbar-thumb:hover {
            background: #a8a8a8;
        }

        /* 调整布局以适配固定宽度 */
        .footer-line-wrapper1 {
            display: flex;
            justify-content: center;
            flex-direction: column;
            /* 改为垂直排列 */
            align-items: center;
            /* 居中对齐 */
        }

        /* 为查询链接添加样式 */
        #whois1 {
            margin-top: 0px;
            margin-bottom: 10px;
            text-align: center;
        }

        #whois1 a {
            text-decoration: none;
            font-weight: bold;
        }

        #whois1 a:hover {
            text-decoration: underline;
        }
.raw-data-content {
            font-family: monospace;
            white-space: pre-wrap;
            font-size: 0.9rem;
            line-height: 1.5;
}
.ba {
    background-image: url("../images/ba.svg");
    height: 18px;
    width: 18px;
    background-position:left center;
    margin: 0 auto;
    background-attachment: scroll;
    background-repeat: no-repeat;
}
.zhx{ text-decoration:line-through}

        .container {
            width: 100%;
            margin-bottom: 30px;
        }

        .bg-white {
            --bg-opacity: 1;
            background-color: #fff;
            background-color: rgba(255, 255, 255, var(--bg-opacity))
        }

        .bg-center {
            background-position: 50%
        }

        .bg-no-repeat {
            background-repeat: no-repeat
        }

        .border-gray-300 {
            --border-opacity: 1;
            border-color: #ebebeb;
            border-color: rgba(235, 235, 235, var(--border-opacity))
        }

        .rounded {
            border-radius: .25rem
        }

        .border-solid {
            border-style: solid
        }

        .border-0 {
            border-width: 0
        }

        .border {
            border-width: 1px
        }

        .border-t {
            border-top-width: 1px
        }

        .cursor-pointer {
            cursor: pointer
        }

        .block {
            display: block
        }

        .inline-block {
            display: inline-block
        }

        .table {
            display: table
        }

        .hidden {
            display: none
        }

        .float-left {
            float: left
        }

        .clearfix:after {
            content: "";
            display: table;
            clear: both
        }

        .font-mono {
            font-family: monaco, courier, monospace
        }

        .font-light {
            font-weight: 300
        }

        .font-normal {
            font-weight: 400
        }

        .font-semibold {
            font-weight: 600
        }

        .h-12 {
            height: 3rem
        }

        .h-20 {
            height: 5rem
        }

        .text-13 {
            font-size: 13px
        }

        .text-15 {
            font-size: 15px
        }

        .text-60 {
            font-size: 60px
        }

        .text-2xl {
            font-size: 1.5rem
        }

        .text-3xl {
            font-size: 1.875rem
        }

        .leading-tight {
            line-height: 1.25
        }

        .leading-normal {
            line-height: 1.5
        }

        .leading-relaxed {
            line-height: 1.625
        }

        .leading-1\.3 {
            line-height: 1.3
        }

        .my-8 {
            margin-top: 2rem;
            margin-bottom: 2rem
        }

        .mx-auto {
            margin-left: auto;
            margin-right: auto
        }

        .mr-2 {
            margin-right: .5rem
        }

        .mb-2 {
            margin-bottom: .5rem
        }

        .mt-3 {
            margin-top: .75rem
        }

        .mb-4 {
            margin-bottom: 1rem
        }

        .ml-4 {
            margin-left: 1rem
        }

        .mt-6 {
            margin-top: 1.5rem
        }

        .mb-6 {
            margin-bottom: 1.5rem
        }

        .mb-8 {
            margin-bottom: 2rem
        }

        .mb-10 {
            margin-bottom: 2.5rem
        }

        .ml-10 {
            margin-left: 2.5rem
        }

        .mb-15 {
            margin-bottom: 3.75rem
        }

        .-ml-6 {
            margin-left: -1.5rem
        }

        .overflow-hidden {
            overflow: hidden
        }

        .p-0 {
            padding: 0
        }

        .py-2 {
            padding-top: .5rem;
            padding-bottom: .5rem
        }

        .px-4 {
            padding-left: 1rem;
            padding-right: 1rem
        }

        .py-8 {
            padding-top: 2rem;
            padding-bottom: 2rem
        }

        .py-10 {
            padding-top: 2.5rem;
            padding-bottom: 2.5rem
        }

        .py-15 {
            padding-top: 3.75rem;
            padding-bottom: 3.75rem
        }

        .pr-6 {
            padding-right: 1.5rem
        }

        .pt-10 {
            padding-top: 2.5rem
        }

        .absolute {
            position: absolute
        }

        .relative {
            position: relative
        }

        .left-1\/2 {
            left: 50%
        }

        .-bottom-4 {
            bottom: -1rem
        }

        .resize {
            resize: both
        }

        .text-center {
            text-align: center
        }

        .text-black-dark {
            --text-opacity: 1;
            color: #404040;
            color: rgba(64, 64, 64, var(--text-opacity))
        }

        .text-gray-600 {
            --text-opacity: 1;
            color: #8d8d8d;
            color: rgba(141, 141, 141, var(--text-opacity))
        }

        .text-red-error {
            --text-opacity: 1;
            color: #bd2426;
            color: rgba(189, 36, 38, var(--text-opacity))
        }

        .text-green-success {
            --text-opacity: 1;
            color: #9bca3e;
            color: rgba(155, 202, 62, var(--text-opacity))
        }

        .antialiased {
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale
        }

        .truncate {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap
        }

        .w-12 {
            width: 3rem
        }

        .w-240 {
            width: 60rem
        }
        .w-120 {
            width: 50%
        }

        .w-1\/2 {
            width: 50%
        }

        .w-1\/3 {
            width: 33.333333%
        }

        .w-full {
            width: 100%
        }
        .lh-30{
            line-height: 30px;
        }

        .transition {
            -webkit-transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, -webkit-transform;
            transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, -webkit-transform;
            transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
            transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, -webkit-transform
        }

        body,
        html {
            --text-opacity: 1;
            color: #404040;
            color: rgba(64, 64, 64, var(--text-opacity));
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
            font-size: 16px
        }

        *,
        body,
        html {
            margin: 0;
            padding: 0
        }

        * {
            box-sizing: border-box
        }

        a {
            --text-opacity: 1;
            color: #2f7bbf;
            color: rgba(47, 123, 191, var(--text-opacity));
            text-decoration: none;
            -webkit-transition-property: all;
            transition-property: all;
            -webkit-transition-duration: .15s;
            transition-duration: .15s;
            -webkit-transition-timing-function: cubic-bezier(0, 0, .2, 1);
            transition-timing-function: cubic-bezier(0, 0, .2, 1)
        }

        a:hover {
            --text-opacity: 1;
            color: #f68b1f;
            color: rgba(246, 139, 31, var(--text-opacity))
        }

        img {
            display: block;
            width: 100%;
            height: auto
        }

        #what-happened-section p {
            font-size: 15px;
            line-height: 1.5
        }

        strong {
            font-weight: 600
        }

        .bg-gradient-gray {
            background-image: -webkit-linear-gradient(top, #dedede, #ebebeb 3%, #ebebeb 97%, #dedede)
        }

        .cf-error-source:after {
            position: absolute;
            --bg-opacity: 1;
            background-color: #fff;
            background-color: rgba(255, 255, 255, var(--bg-opacity));
            width: 2.5rem;
            height: 2.5rem;
            --transform-translate-x: 0;
            --transform-translate-y: 0;
            --transform-rotate: 0;
            --transform-skew-x: 0;
            --transform-skew-y: 0;
            --transform-scale-x: 1;
            --transform-scale-y: 1;
            -webkit-transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y));
            -ms-transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y));
            transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y));
            --transform-rotate: 45deg;
            content: "";
            bottom: -1.75rem;
            left: 50%;
            margin-left: -1.25rem;
            box-shadow: 0 0 4px 4px #dedede
        }

        @media screen and (max-width:720px) {
            .cf-error-source:after {
                display: none
            }
        }

        .cf-icon-browser {
            background-image: url(/cdn-cgi/images/cf-icon-browser.png)
        }

        .cf-icon-cloud {
            background-image: url(/cdn-cgi/images/cf-icon-cloud.png)
        }

        .cf-icon-server {
            background-image: url(/cdn-cgi/images/cf-icon-server.png)
        }

        .cf-icon-ok {
            background-image: url(/cdn-cgi/images/cf-icon-ok.png)
        }

        .cf-icon-error {
            background-image: url(/cdn-cgi/images/cf-icon-error.png)
        }

        #cf-wrapper .feedback-hidden {
            display: none
        }

        #cf-wrapper .feedback-success {
            min-height: 33px;
            line-height: 33px
        }

        #cf-wrapper .cf-button {
            color: #fff;
            font-size: 13px;
            border-color: #fff;
            background-color: #000000;
            -webkit-transition-timing-function: ease;
            transition-timing-function: ease;
            -webkit-transition-duration: .2s;
            transition-duration: .2s;
            -webkit-transition-property: background-color, border-color, color;
            transition-property: background-color, border-color, color
        }

        #cf-wrapper .cf-button:hover {
            color: #fff;
            background-color: #003681
        }

        .cf-error-footer .hidden {
            display: none
        }

        .cf-error-footer .cf-footer-ip-reveal-btn {
            -webkit-appearance: button;
            -moz-appearance: button;
            appearance: button;
            text-decoration: none;
            color: inherit;
            border: none;
            font: inherit;
            cursor: pointer;
            color: #0051c3;
            -webkit-transition: color .15s ease;
            transition: color .15s ease
        }

        .cf-error-footer .cf-footer-ip-reveal-btn:hover {
            color: #ee730a
        }

        .code-label {
            background-color: #d9d9d9;
            color: #313131;
            font-weight: 500;
            border-radius: 1.25rem;
            font-size: .75rem;
            line-height: 4.5rem;
            padding: .25rem .5rem;
            height: 4.5rem;
            white-space: nowrap;
            vertical-align: middle
        }

        @media (max-width:639px) {
            .sm\:block {
                display: block
            }

            .sm\:hidden {
                display: none
            }

            .sm\:mb-1 {
                margin-bottom: .25rem
            }

            .sm\:mb-2 {
                margin-bottom: .5rem
            }

            .sm\:py-4 {
                padding-top: 1rem;
                padding-bottom: 1rem
            }

            .sm\:px-8 {
                padding-left: 2rem;
                padding-right: 2rem
            }

            .sm\:text-left {
                text-align: left
            }
        }

        @media (max-width:720px) {
            .md\:border-gray-400 {
                --border-opacity: 1;
                border-color: #dedede;
                border-color: rgba(222, 222, 222, var(--border-opacity))
            }

            .md\:border-solid {
                border-style: solid
            }

            .md\:border-0 {
                border-width: 0
            }

            .md\:border-b {
                border-bottom-width: 1px
            }

            .md\:block {
                display: block
            }

            .md\:inline-block {
                display: inline-block
            }

            .md\:hidden {
                display: none
            }

            .md\:float-none {
                float: none
            }

            .md\:text-3xl {
                font-size: 1.875rem
            }

            .md\:m-0 {
                margin: 0
            }

            .md\:mt-0 {
                margin-top: 0
            }

            .md\:mb-2 {
                margin-bottom: .5rem
            }

            .md\:p-0 {
                padding: 0
            }

            .md\:py-8 {
                padding-top: 2rem;
                padding-bottom: 2rem
            }

            .md\:px-8 {
                padding-left: 2rem;
                padding-right: 2rem
            }

            .md\:pr-0 {
                padding-right: 0
            }

            .md\:pb-10 {
                padding-bottom: 2.5rem
            }

            .md\:top-0 {
                top: 0
            }

            .md\:right-0 {
                right: 0
            }

            .md\:left-auto {
                left: auto
            }

            .md\:text-left {
                text-align: left
            }

            .md\:w-full {
                width: 100%
            }
        }

        @media (max-width:1023px) {
            .lg\:text-sm {
                font-size: .875rem
            }

            .lg\:text-2xl {
                font-size: 1.5rem
            }

            .lg\:text-4xl {
                font-size: 2.25rem
            }

            .lg\:leading-relaxed {
                line-height: 1.625
            }

            .lg\:px-8 {
                padding-left: 2rem;
                padding-right: 2rem
            }

            .lg\:pt-6 {
                padding-top: 1.5rem
            }

            .lg\:w-full {
                width: 100%
            }
        }



        .css-8wb8mt {
            grid-column: auto;
            margin-top: auto;
        }
        .css-8wb8mt1 {
            grid-column: auto;
            margin-bottom: 30px;
            margin-top: auto;
        }
        .css-8wb8mt2 {
            grid-column: auto;

            margin-top: auto;
        }
        @media only screen and (min-width: 768px) {
            .css-8wb8mt {
                grid-column: 1/12;
            }
        }
        @media only screen and (min-width: 768px) {
            .css-8wb8mt1 {
                grid-column: 8/12;
                margin-bottom: 30px;margin-top: 10px;margin-left: 50px;
            }
        }
        @media only screen and (min-width: 768px) {
            .css-8wb8mt2 {
                grid-column: 1/26;
            }
        }

        @media only screen and (min-width: 1180px) {
            .css-8wb8mt {
            }
        }
        @media only screen and (min-width: 1180px) {
            .css-8wb8mt1 {
                margin-bottom: 0px;margin-top: 10px;margin-left: 50px;
            }
        }
        @media only screen and (min-width: 1180px) {
            .css-8wb8mt2 {
            }
        }
        @media (min-width: 768px) {
            .css-8wb8mt {
                grid-row: 1;
            }
        }
        @media (min-width: 768px) {
            .css-8wb8mt1 {
                grid-row: 1;
                margin-top: 10px;margin-left: 50px;
            }
        }
        @media (min-width: 768px) {
            .css-8wb8mt2 {
                grid-row: 1;
            }
        }
.css-tenpx7 {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
            gap: 24px 0;

        }

        @media only screen and (min-width: 768px) {
            .css-tenpx7 {

            }
        }

        @media only screen and (min-width: 1180px) {
            .css-tenpx7 {

            }
        }

        @media only screen and (min-width: 1920px) {
            .css-tenpx7 {

            }
        }

        @media (min-width: 1180px) {
            .css-tenpx7 {
                -webkit-flex-direction: row;
                -ms-flex-direction: row;
                flex-direction: row;
                gap: 0 48px;
            }
        }
        .css-1nmjbvy {
            grid-column: auto;

        }

        @media only screen and (min-width: 768px) {
            .css-1nmjbvy {
                grid-column: 12/28;

            }
        }

        @media only screen and (min-width: 1180px) {
            .css-1nmjbvy {
                grid-column: 16/25;
            }
        }

       .css-75l27b {
            display: grid;
            grid-template-columns: none;
            grid-template-rows: 1fr;
            grid-column-gap: 0;

        }

        @media only screen and (min-width: 768px) {
            .css-75l27b {
                grid-template-columns: repeat(18,
                        1fr);

            }
        }

        @media only screen and (min-width: 1180px) {
            .css-75l27b {
                grid-template-columns: repeat(26,
                        1fr);

            }
        }

        @media only screen and (min-width: 1920px) {
            .css-75l27b {

            }
        }

        .css-75l27b::before {
            content: "";
            position: absolute;

            display: block;
            left: 0;
            right: 0;

        }
        html {
            scroll-padding-top: calc(var(--header-height, 76px) * 1.5);
            margin-right: calc((100vw - 100%) * -1);
            overflow: hidden auto;
        }
    
        @media only screen and (min-width: 768px) {
            html {
                scroll-padding-top: calc(var(--header-height, 80px) * 1.5);
            }
        }
    
        @media only screen and (min-width: 1180px) {
            html {
                scroll-padding-top: calc(var(--header-height, 90px) * 1.5);
            }
        }
    
        @media only screen and (min-width: 1920px) {
            html {
                scroll-padding-top: calc(var(--header-height, 142px) * 1.5);
            }
        }
    
        body {
            margin-right: calc((100vw - 100%));
        }
				@import url("https://fonts.googleapis.com/css?family=Montserrat:200,300,400,600");
			
				.more-pens {
					position: fixed;
					left: 20px;
					bottom: 20px;
					z-index: 10;
					font-family: "Montserrat";
					font-size: 12px;
				}
			
				a.white-mode,
				a.white-mode:link,
				a.white-mode:visited,
				a.white-mode:active {
					font-family: "Montserrat";
					font-size: 12px;
					text-decoration: none;
					background: #212121;
					padding: 4px 8px;
			
				}
			
				a.white-mode:hover,
				a.white-mode:link:hover,
				a.white-mode:visited:hover,
				a.white-mode:active:hover {
			
					color: #212121;
				}
			
				body {
					margin: 0;
					padding: 0;
					overflow: hidden;
				}
			
				.background {
		position: absolute;
				
					filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#edf3f8", endColorstr="#dee3e8", GradientType=1);
				}
			
				.title {
					z-index: 10;
					position: absolute;
					left: 50%;
					top: 40%;
					transform: translateX(-50%) translateY(-50%);
					font-family: "Montserrat";
					text-align: center;
					width: 60%;
				}
			
				.title h1 {
					position: relative;
					color: #000000;
					font-weight: 300;
					font-size: 46px;
					padding: 0;
					margin: 0;
					line-height: 1;
				}
			
				.title h2 {
					font-weight: 600;
					font-size: 60px;
					padding: 0;
					margin: 0;
					line-height: 1;
				}
			
				.title h3 {
					font-weight: 200;
					font-size: 20px;
					padding: 0;
					margin: 0;
					line-height: 2;
					color: #5e7283;
					letter-spacing: 2px;
				}
			
				.title p {
					font-weight: 200;
					font-size: 16px;
					color: #5e7283;
				}
			
				.pentahedron {
					position: absolute;
					width: 100%;
					height: 100%;
					fill: #3E82F7;
				}
			
				.point {
					fill: #8491A3;
				}
			
				.rhombus {
					fill: #2DA94F;
					stroke: #2DA94F;
				}
			
				.x {
					fill: #FDBD00;
				}
			
				.circle {
					fill: #ED412D;
				}
			
				svg {
					display: block;
					width: 30px;
					height: 30px;
					position: absolute;
					transform: translateZ(0px);
				}

/* ===== 以下由 index.html 内联 <style> 块并入（保持原有级联顺序） ===== */

/* ---- 块1：新闻/价格卡片/标签 ---- */
.value-multiline {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.value-multiline li {
    position: relative;
    padding-left: 1.2em;
    margin-bottom: 0.5em;
}

.value-multiline li:before {
    content: "-";
    position: absolute;
    left: 0;
}

/* 相关新闻：两列布局，左一右一逐行排布 */
.news-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 28px;
    align-items: start;
}

.news-item {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

@media (max-width: 640px) {
    .news-grid {
        grid-template-columns: 1fr;
    }
}

/* 新增：价格卡片样式 */
.price-card-container {
    margin: 20px auto;
    max-width: 100%;
}

.price-card {
    font-size: 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.price-info {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 12px;
}

.price-amount {
    font-size: 22px;
}

.price-currency {
    font-size: 14px;
    font-weight: normal;
}

.price-note {
    font-size: 12px;
    color: #999;
}

.price-error {
    background: #fff2f0;
    border-left-color: #ff4d4f;
    color: #ff4d4f;
}

.price-loading {
    color: #999;
}

/* 标签切换：阿里云 / 17ex 两平台价格 */
.price-tabs {
    display: inline-flex;
    gap: 4px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 4px;
    background: #f7f8fa;
}

.price-tab {
    border: none;
    background: transparent;
    padding: 8px 18px;
    font-size: 14px;
    color: #555;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.price-tab:hover {
    color: #2d6a4f;
}

.price-tab.active {
    background: #2d6a4f;
    color: #ffffff;
}

.price-tab-body {
    margin-top: 12px;
}

@media (max-width: 480px) {
    .price-tab {
        padding: 8px 12px;
        font-size: 13px;
    }
}

@media (max-width: 640px) {
    .price-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .price-amount {
        font-size: 24px;
    }
}

/* ---- 块2：购买按钮/双栏 ---- */
.buy-button, #buyLink {
    display: inline-block;
    background-color: #2d6a4f;
    color: #ffffff;
    border-radius: 60px;
    padding: 12px 32px;
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    letter-spacing: 0.5px;
    cursor: pointer;
    outline: none;
    text-align: center;
    transition: all 0.2s ease-in-out;
    border: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    min-width: 140px;
}
.buy-button:hover, #buyLink:hover {
    background-color: #2d6a4f;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
}
.buy-button:active, #buyLink:active {
    transform: translateY(1px);
    background-color: #2d6a4f;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.buy-button:focus-visible, #buyLink:focus-visible {
    outline: 2px solid #000000;
    outline-offset: 3px;
    background-color: #0a0a0a;
}
@media (max-width: 480px) {
    .buy-button, #buyLink {
        padding: 12px 24px;
        font-size: 0.95rem;
        min-width: 120px;
    }
}
.button-wrapper {
    margin-top: 30px;
}
.row-duo-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    margin: 0;
    padding: 0;
    background: transparent;
    width: 100%;
}

.button-wrapper {}
@media (max-width: 639px) {
    .button-wrapper {
        margin-bottom: 50px;
    }
}
.row-duo-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    margin: 0;
    padding: 0;
    background: transparent;
    width: 100%;
}
.row-duo-wrapper>div {
    flex: 1;
    font-size: 12px;
    margin-bottom: 30px;
    margin-top: 70px;
    margin-left: 50px;
}
@media (max-width: 639px) {
    .row-duo-wrapper {
        flex-direction: column !important;
    }
    .row-duo-wrapper>div {
        flex: none !important;
        width: 100% !important;
        margin-top: 10px;
    }
}
.price {
    font-size: 36px;
}
.price .small-decimal {
    font-size: 28px;
}

/* ---- 块3：视频播放器 ---- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
}

/* 播放器容器 */
.video-container {
    max-width: 1200px;
    width: 100%;
    overflow: hidden;
    position: relative;
}

/* 视频元素: 无原生控件 */
.video-player {
    width: 100%;
    height: auto;
    display: block;
    cursor: pointer;
}

/* 自定义控制区: 只放置静音切换按钮 (右下角) */
.custom-controls {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 20;
}

/* 声音切换按钮容器 */
.mute-toggle {
    background: transparent;
    backdrop-filter: none;
    position: relative;
    border: none;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
}

/* 按钮悬浮效果 */
.mute-toggle:hover {
    transform: scale(1.05);
}

.mute-toggle:active {
    transform: scale(0.96);
    transition: 0.05s;
}

.mute-toggle:focus-visible {
    outline-offset: 2px;
}

/* 公用图标样式 */
.sound-icon {
    width: 26px;
    height: 26px;
    display: block;
    fill: currentColor;
}
.sound-iconon {
    width: 22px;
    height: 22px;
    display: block;
    fill: currentColor;
}

/* 两个图标切换：默认显示静音图标 (第一个) 隐藏有声图标 */
.mute-toggle .icon-muted {
    display: flex;
}
.mute-toggle .icon-unmuted {
    display: none;
}
/* 当视频为非静音状态时，显示有声图标，隐藏静音图标 */
.mute-toggle.unmuted .icon-muted {
    display: none;
}
.mute-toggle.unmuted .icon-unmuted {
    display: flex;
}

/* 移动端适配 */
@media (max-width: 640px) {
    .mute-toggle {
        width: 44px;
        height: 44px;
    }
    .sound-icon {
        width: 22px;
        height: 22px;
    }
    .sound-icon {
        width: 22px;
        height: 22px;
    }
    .custom-controls {
        bottom: 12px;
        right: 12px;
    }
}

/* 加载指示器 (非控制按键) */
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    pointer-events: none;
    transition: opacity 0.2s;
    backdrop-filter: blur(2px);
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top: 3px solid #ffffff;
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}

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

.hide-loading {
    display: none;
}

/* 错误提示浮层 */
.error-tip {
    position: absolute;
    bottom: 80px;
    left: 16px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    color: #ffaa66;
    font-size: 13px;
    padding: 6px 14px;
    border-radius: 40px;
    font-weight: 500;
    pointer-events: none;
    z-index: 15;
    font-family: monospace;
    letter-spacing: 0.3px;
    display: none;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .error-tip {
        font-size: 11px;
        bottom: 70px;
        white-space: normal;
        max-width: 85%;
    }
}

/* ---- 块4：对比表格 ---- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #f4f7fc;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, 'Noto Sans', sans-serif;
    color: #1a2c3e;
    padding: 2rem 1.25rem;
    line-height: 1.45;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

/* 页面头部 */
.page-header {
    text-align: center;
    margin-bottom: 2.2rem;
}

.page-header h1 {
    font-size: 1.9rem;
    font-weight: 700;
    background: linear-gradient(130deg, #1f3a6b, #2b5f8a);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    letter-spacing: -0.3px;
    margin-bottom: 0.5rem;
}

.page-header .subhead {
    font-size: 0.95rem;
    color: #4a627a;
    border-top: 1px solid #dce5ec;
    display: inline-block;
    padding-top: 0.7rem;
    margin-top: 0.25rem;
}

/* 表格滚动容器 (移动端横向滑动) */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
    background: #ffffff;
}

/* 核心：固定布局 + 三列等宽 */
.compare-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 0.9rem;
    background-color: #ffffff;
    overflow: hidden;
    min-width: 660px;
    border: 12px solid #f8f9fa;
    background-color: #ffffff;
    font-size: 12px;
    /* 保证最小可读宽度，依然触发滚动，但列宽比例固定 */
}

/* 列宽定义：第一列固定130px，其余三列平均分配剩余宽度 */
.compare-table th,
.compare-table td {
    padding: 1rem 0.9rem;
    vertical-align: top;
    word-break: break-word;
}

/* 第一列（属性名称）宽度固定 130px */
.compare-table th:first-child,
.compare-table td:first-child {
    width: 130px;
    border-right: 1px solid #e6edf2;
    font-weight: 650;
    color: #215d77;
    letter-spacing: -0.2px;
}

/* 后三列（三种交易方式）等宽：自动计算 (100% - 130px) / 3 */
.compare-table th:nth-child(2),
.compare-table th:nth-child(3),
.compare-table th:nth-child(4),
.compare-table td:nth-child(2),
.compare-table td:nth-child(3),
.compare-table td:nth-child(4) {
    width: calc((100% - 130px) / 3);
}

/* 表头样式 */
.compare-table thead tr {
    background: #f0f4f9;
    border-bottom: 1px solid #e2edf2;
}

.compare-table th {
    font-weight: 700;
    font-size: 1rem;
    text-align: left;
    color: #000000;
    vertical-align: bottom;
    background-color: #f0f4f9;
}

/* 交易方式表头内部样式: 方法名称 + 标签 */
.method-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.method-name {
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f2b40;
}

.method-tag {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.65rem;
    border-radius: 40px;
    display: inline-block;
    width: fit-content;
    background: #e9eff5;
    color: #1f6392;
}

.tag-enterprise {
    background: #e6f2ff;
    color: #1e5ba3;
}

.tag-personal {
    background: #efe6ff;
    color: #6b46c1;
}

.tag-mibro {
    background: #e0f7ec;
    color: #0a6e4a;
}

/* 单元格统一样式 */
.compare-table td {
    border-bottom: 1px solid #eef3f8;
    background-color: #ffffff;
    color: #000000;
    line-height: 1.48;
}

.compare-table tr:last-child td {
    border-bottom: none;
}

/* 高亮与标识 */
.fee-badge {
    font-weight: 700;
    background: #fef6e0;
    padding: 0.2rem 0.45rem;
    border-radius: 20px;
    display: inline-block;
    font-size: 0.85rem;
}

.zero-fee {
    background: #dff9ef;
    color: #146b3a;
    font-weight: 800;
}

.invoice-yes {
    color: #1e7948;
    font-weight: 600;
}

.invoice-no {
    color: #a03e4b;
    font-weight: 500;
}

.subnote {
    font-size: 0.72rem;
    color: #5e7c97;
    margin-top: 4px;
    display: inline-block;
    line-height: 1.3;
}

.channel-desc {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* 悬停微交互 */
.compare-table tbody tr:hover td {
    background-color: #fafdff;
    transition: 0.1s;
}

/* 表格下方说明区 */
.info-note {
    margin-top: 1.8rem;
    background: #eef2f6;
    border-radius: 20px;
    padding: 1rem 1.5rem;
    font-size: 0.75rem;
    color: #2c526b;
    text-align: center;
    border-left: 4px solid #3b82f6;
}

.info-note p {
    margin: 0.2rem 0;
}

/* 移动端适配：减小内边距，保持列宽比例 */
@media (max-width: 720px) {
    body {
        padding: 1.2rem 0.8rem;
    }

    .compare-table th,
    .compare-table td {
        padding: 0.85rem 0.7rem;
    }

    .compare-table th:first-child,
    .compare-table td:first-child {
        width: 115px;
        /* 小屏稍微压缩属性列，保证剩余三列等宽且内容可读 */
    }

    .compare-table th:nth-child(2),
    .compare-table th:nth-child(3),
    .compare-table th:nth-child(4),
    .compare-table td:nth-child(2),
    .compare-table td:nth-child(3),
    .compare-table td:nth-child(4) {
        width: calc((100% - 115px) / 3);
    }

    .method-name {
        font-size: 0.95rem;
    }

    .page-header h1 {
        font-size: 1.65rem;
    }
}

@media (max-width: 480px) {

    .compare-table th,
    .compare-table td {
        padding: 0.7rem 0.5rem;
    }

    .compare-table th:first-child,
    .compare-table td:first-child {
        width: 105px;
    }

    .compare-table th:nth-child(2),
    .compare-table th:nth-child(3),
    .compare-table th:nth-child(4),
    .compare-table td:nth-child(2),
    .compare-table td:nth-child(3),
    .compare-table td:nth-child(4) {
        width: calc((100% - 105px) / 3);
    }

    .fee-badge,
    .zero-fee {
        font-size: 0.75rem;
    }

    .subnote {
        font-size: 0.68rem;
    }
}

/* 滚动条美化 */
.table-responsive::-webkit-scrollbar {
    height: 6px;
}

.table-responsive::-webkit-scrollbar-track {
    background: #e2e8f0;
    border-radius: 8px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 8px;
}

/* ---- 块5：联系议价弹窗 ---- */
:root {
    --primary: #4f6ef7;
    --danger: #e74c3c;
    --success: #27ae60;
    --text: #2c3e50;
    --text-light: #666;
    --border: #e0e5ec;
    --bg: #f5f7fa;
    --white: #ffffff;
    --shadow-lg: 0 20px 60px rgba(0,0,0,0.18);
    --radius: 14px;
    --radius-sm: 8px;
    --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
.page-container { text-align: center; }
.page-title { font-size: 28px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.page-subtitle { font-size: 15px; color: var(--text-light); margin-bottom: 32px; }
.btn-open-modal {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 15px 36px; font-size: 17px; font-weight: 600;
    color: #fff; background: linear-gradient(135deg, var(--primary), #6c8cff);
    border: none; border-radius: 50px; cursor: pointer;
    box-shadow: 0 6px 24px rgba(79,110,247,0.35);
    transition: var(--transition); letter-spacing: 0.5px;
}
.btn-open-modal:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 32px rgba(79,110,247,0.45);
}
.btn-open-modal:active { transform: translateY(0); }
.modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px); z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    padding: 20px;
}
.modal-overlay.active { opacity: 1; visibility: visible; }
.modal-dialog {
    background: var(--white); border-radius: var(--radius);
    box-shadow: var(--shadow-lg); width: 100%; max-width: 500px;
    max-height: 90vh; overflow-y: auto;
    transform: translateY(30px) scale(0.96);
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
}
.modal-overlay.active .modal-dialog { transform: translateY(0) scale(1); }
.modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px 16px; border-bottom: 1px solid var(--border);
    position: sticky; top: 0; background: var(--white); z-index: 10;
    border-radius: var(--radius) var(--radius) 0 0;
}
.modal-header h3 { font-size: 20px; font-weight: 700; color: var(--text); }
.btn-close {
    width: 36px; height: 36px; border-radius: 50%; border: none;
    background: #f1f3f6; cursor: pointer; font-size: 18px; color: #888;
    display: flex; align-items: center; justify-content: center;
    transition: var(--transition);
}
.btn-close:hover { background: #e4e7ec; color: #333; transform: rotate(90deg); }
.modal-body { padding: 20px 24px 24px; }
.form-group { margin-bottom: 18px; }
.form-label {
    display: block; font-size: 14px; font-weight: 600;
    color: var(--text); margin-bottom: 6px;
}
.form-label .required { color: var(--danger); margin-left: 2px; font-weight: 700; }
.form-input, .form-textarea {
    width: 100%; padding: 12px 15px; font-size: 15px;
    border: 2px solid var(--border); border-radius: var(--radius-sm);
    background: #fafbfd; color: var(--text); transition: var(--transition);
    outline: none; font-family: inherit; resize: vertical;
}
.form-input:focus, .form-textarea:focus {
    border-color: var(--primary); background: #fff;
    box-shadow: 0 0 0 4px rgba(79,110,247,0.08);
}
.form-input.error, .form-textarea.error {
    border-color: var(--danger); background: #fffafa;
    box-shadow: 0 0 0 4px rgba(231,76,60,0.06);
}
.form-textarea { min-height: 90px; line-height: 1.6; }
.error-message {
    font-size: 12px; color: var(--danger); margin-top: 4px;
    display: none; font-weight: 500;
}
.error-message.show { display: block; }
.btn-submit {
    width: 100%; padding: 14px; font-size: 16px; font-weight: 700;
    color: #fff; background: linear-gradient(135deg, var(--primary), #5a7af8);
    border: none; border-radius: 50px; cursor: pointer;
    transition: var(--transition); letter-spacing: 1px;
    box-shadow: 0 4px 16px rgba(79,110,247,0.3);
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-submit:hover { background: linear-gradient(135deg, #5a7af8, #6e8dff); transform: translateY(-1px); }
.btn-submit:disabled { opacity: 0.7; cursor: not-allowed; pointer-events: none; }
.spinner {
    display: none; width: 20px; height: 20px;
    border: 2.5px solid rgba(255,255,255,0.3);
    border-top-color: #fff; border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
.btn-submit.loading .spinner { display: inline-block; }
.btn-submit.loading .btn-text { display: inline; }
@keyframes spin { to { transform: rotate(360deg); } }
.feedback-msg {
    text-align: center; padding: 12px 16px;
    border-radius: var(--radius-sm); font-size: 14px;
    font-weight: 600; margin-bottom: 16px; display: none;
}
.feedback-msg.show { display: block; }
.feedback-msg.success { background: #eafaf1; color: #1e7e34; border: 1px solid #b7dfc5; }
.feedback-msg.error { background: #fdf0ef; color: #c0392b; border: 1px solid #f5c6cb; }
.toast {
    position: fixed; top: 30px; left: 50%;
    transform: translateX(-50%) translateY(-120px);
    background: #333; color: #fff; padding: 14px 28px;
    border-radius: 50px; font-size: 15px; font-weight: 600;
    z-index: 2000; opacity: 0;
    transition: transform 0.4s cubic-bezier(0.175,0.885,0.32,1.275), opacity 0.3s ease;
    pointer-events: none; box-shadow: 0 8px 30px rgba(0,0,0,0.25);
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.toast.success { background: #27ae60; }
.toast.error { background: #e74c3c; }
@media (max-width: 540px) {
    .modal-header { padding: 16px 18px 14px; }
    .modal-body { padding: 16px 18px 20px; }
    .form-input, .form-textarea { padding: 10px 13px; font-size: 14px; }
    .btn-submit { padding: 13px; font-size: 15px; }
    .btn-open-modal { padding: 13px 28px; font-size: 15px; }
}