html{font-size: 14px;}
body, div, h1, h2, h3, h4, h5, h6, p, td, th, span, a {
    font-family: "Poppins", 'Roboto', Arial, sans-serif !important;
    /*color: rgb(0, 12, 37);*/
}
body{min-width: 25rem;}
div.wrapper {
    width: 100% !important;
    min-width: unset;
    max-width: 85.71429rem;
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.converter-container {
    width: 100%;
    max-width: 85.71429rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.142857rem;
    margin: 0 auto;
}

.language-switcher {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background-color: var(--secondary-bg);
    /*padding: 0.5rem;*/
    border-radius: 3.57143rem;
    border: 0.07143rem solid var(--border-color);
    border-radius: 2.25rem;

    background: rgba(255, 255, 255, 0.23);

    color: rgba(255, 255, 255, 1);

    font-size: 1.42857rem;
    font-weight: 600;
    line-height: 2.14286rem;
    letter-spacing: 0.0rem;
    text-align: center;
}

.lang-label {
    padding: 1.14286rem 1.5rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

#switch-btn {
    /*background-color: var(--primary-bg);*/
    color: var(--text-color);
    border: 0.07143rem solid var(--border-color);
    border-radius: 50%;
    width: 2.85714rem;
    height: 2.85714rem;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease, background-color 0.3s ease;
    background: rgba(255, 255, 255, 0.28);
    padding: 0;
}

#switch-btn:hover {
    transform: rotate(180deg);
    /*background-color: #2a2a6a;*/
}

.code-areas {
    display: flex;
    width: 100%;
    gap: 2rem;
}

.code-wrapper {
    flex: 1;
    position: relative;
    background-color: #fff;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 0.57143rem 1.78571rem rgba(0, 0, 0, 0.2);
}
.lang-label{
    min-width: 12.142857rem;}

textarea {
    width: 100%;
    height: 20rem;
    background-color: transparent;
    color: #333;
    border: none;
    resize: none;

    font-size: 1.5rem;
    line-height: 1.5;
    outline: none;
}

textarea::placeholder {
    color: #aaa;
}

#copy-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: #e9ecef;
    border: none;
    color: #495057;
    border-radius: 0.5rem;
    padding: 0.5rem;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.2s ease;
}

#copy-btn:hover {
    background-color: #ced4da;
}

#copy-btn.copied {
    background-color: #28a745;
    color: white;
}

#convert-btn {
    border: none;
    padding: 1rem 3rem;
    cursor: pointer;

    border-radius: 0.71429rem;

    background: rgba(242, 55, 93, 1);
    color: rgba(255, 255, 255, 1);

    font-size: 1.42857rem;
    font-weight: 600;
    line-height: 2.14286rem;
    letter-spacing: 0;
    text-align: center;
    margin-bottom: 1.85714rem;

}

#convert-btn:hover {
    /*background-color: #e0355b;*/
    /*transform: translateY(-0.14286rem);*/
}

#convert-btn:disabled {
    background-color: #a0a0a0;
    cursor: not-allowed;
    transform: translateY(0);
}


.page-container {

    margin: 0 auto;
    /*padding: 2rem;*/
}









.page-container .how-to-use{
    padding: 2rem;
    max-width: 78.57143rem;
    margin: 0 auto;
}
.page-container .banner{
    padding: 2rem;
    margin: 0 auto;
}
.page-container .main-features{
    padding: 2rem;
    max-width: 78.57143rem;
    margin: 0 auto;
}
.page-container .dive-deeper{
    padding: 2rem;
    max-width: 78.57143rem;
    margin: 0 auto;
}

section {
    padding: 3rem 0;
}

.section-title {
    text-align: center;
    margin-bottom: 3rem;
}

#page .section-title h1{
    color: rgba(15, 52, 228, 1);
    
    font-size: 2.14286rem;
    font-weight: 600;
    line-height: 3.21429rem;
    letter-spacing: 0.0rem;
    text-align: center;
}
#page .section-title h2 {
    color: rgba(15, 52, 228, 1);
    
    font-size: 2.14286rem;
    font-weight: 600;
    line-height: 3.21429rem;
    letter-spacing: 0.0rem;
    text-align: center;
}
.section-title p {
    color: rgba(0, 12, 37, 1);
    
    font-size: 1.42857rem;
    font-weight: 600;
    line-height: 2.14286rem;
    letter-spacing: 0.0rem;
    text-align: center;
    max-width: 57.14286rem;
    margin: 0 auto;
}









/* --- 新增：步骤网格 (How to Use) --- */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem 2rem; /* 垂直间距大一些，水平间距小一些 */
    max-width: 57.14286rem;
    margin: 0 auto;
}

.step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.step-icon {
    width: 10.42857rem;
    height: 8.57143rem;
    /*border-radius: 50%;*/
    /*border: 0.14286rem solid var(--accent-orange);*/
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--accent-orange);
    margin-bottom: 1.5rem;
}
.step-icon1{
    background: url("/tools/images/step1.svg") no-repeat;
}
.step-icon2{
    background: url("/tools/images/step3.svg") no-repeat;
}
.step-icon3{
    background: url("/tools/images/step4.svg") no-repeat;
}
.step-icon4{
    background: url("/tools/images/step2.svg") no-repeat;
}
.step-item p {
    color: rgba(0, 12, 37, 1);
    
    font-size: 1.14286rem;
    font-weight: 400;
    line-height: 2rem;
    letter-spacing: 0.0rem;
    text-align: center;
    max-width: 80%;
}

/* --- 横幅 (Banner) --- */
.banner {
    background-color: var(--light-purple-bg);
    padding: 2rem;
    text-align: center;
    /*border-radius: 0.57143rem;*/
    margin: 2rem 0;
}
.banner p {
    color: rgba(141, 0, 221, 1);
    
    font-size: 1.85714rem;
    font-weight: 400;
    line-height: 2.85714rem;
    letter-spacing: 0.0rem;
    text-align: left;
    max-width: 85.71429rem;
    margin:0 auto;
}
.banner p a{
    color: rgba(141, 0, 221, 1);
    text-decoration: underline !important;
}

/* --- 特征网格 (Main Features) --- */
.features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.feature-card {
    /*background-color: var(--white-color);*/
    /*border: 0.07143rem solid var(--border-color);*/
    /*border-radius: 0.57143rem;*/
    /*padding: 2rem;*/
    /*transition: box-shadow 0.3s ease, transform 0.3s ease;*/


    box-sizing: border-box;
    border: 0.07143rem solid rgba(165, 182, 215, 1);
    border-radius: 1.42857rem;
    padding: 1.28571rem;

}

.feature-card p {
    color: rgba(0, 12, 37, 1);
    
    font-size: 1.42857rem;
    /*font-weight: 600;*/
    line-height: 2.85714rem;
    letter-spacing: 0.0rem;
    text-align: left;
}

.feature-card h3 {
    color: var(--primary-blue);
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

/* --- 教程链接 (Dive Deeper) --- */
.tutorial-links {
    list-style-type: none;
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.tutorial-links li a {
    color: rgba(0, 183, 95, 1);
    
    font-size: 1.42857rem;
    font-weight: 400;
    line-height: 2.14286rem;
    letter-spacing: 0.0rem;
    text-align: left;
    text-decoration-line: underline !important;
}

.tutorial-links li::before {
    content: '●';
    /*color: var(--accent-orange);*/
    margin-right: 0.5rem;
    /* background: rgba(0, 183, 95, 1); */
    color: rgba(0, 183, 95, 1);
    text-decoration-line: none !important;
}
.tutorial-links li{
    list-style: none;
}
.tutorial-links li a:hover {
    text-decoration: underline;
}
#toolbar #menu > li.icon {
    padding-left: 0;
}
.top-all{
    background: linear-gradient(-45.00deg, rgba(0, 9, 55, 1),rgba(16, 48, 199, 1) 100%);
}
.top1{
    color: rgba(116, 134, 223, 1);
    font-size: 2.85714rem;
    font-weight: 900;
    line-height: 4.28571rem;
    letter-spacing: 0.0rem;
    text-align: center;
    /*background: rgba(255, 255, 255, 0.06);*/
    /*background: linear-gradient(-45.00deg, rgba(0, 9, 55, 1),rgba(16, 48, 199, 1) 100%);*/
    background: rgba(255, 255, 255, 0.06);
    padding: 1.78571rem;
}
.top2{
    color: rgba(255, 255, 255, 1);
    font-size: 2.14286rem;
    font-weight: 600;
    line-height: 3.21429rem;
    letter-spacing: 0.0rem;
    text-align: center;

    /*padding-top: 2.85714rem;*/
}
.top2 div.wrapper {
    width: 100% !important;
    min-width: unset;
    max-width: 71.42857rem;
}
.top2 div.wrapper h2{
    margin-top: 0;
    color: rgba(255, 255, 255, 1);

    font-size: 2.14286rem;
    font-weight: 600;
    line-height: 3.21429rem;
    letter-spacing: 0.0rem;
    text-align: center;
    padding-top: 1.85714rem;
}
.top2 div.wrapper h3{
    color: rgba(255, 255, 255, 1);

    font-size: 1.42857rem;
    font-weight: 400;
    line-height: 2rem;
    letter-spacing: 0.0rem;
    text-align: center;
    margin-bottom: 2rem;
}
.page-container .banner{
    background: rgba(251, 243, 255, 1);
}
.CodeMirror-code div{
    text-align: left;
}


/* --- CodeMirror 编辑器样式 (已修正) --- */

.code-wrapper {
    /* 容器现在只负责布局和定位 */
    flex: 1;
    position: relative;
    /* 移除了 background-color, padding 和 overflow: hidden */
}

/* 将所有视觉样式直接应用到 CodeMirror 实例上 */
.CodeMirror {
    /* 关键：在这里设置圆角 */
    border-radius: 1rem;

    /* 关键：确保编辑器本身可以处理溢出，并保持圆角效果 */
    overflow: hidden;

    /* 设置编辑器的尺寸和字体 */
    height: 100%;
    font-size: 1.14286rem;
}

/* 调整复制按钮的位置 (无变化) */
#copy-btn {
    position: absolute;
    top: 0.71429rem;
    right: 0.71429rem;
    z-index: 10;
}
.CodeMirror pre.CodeMirror-line, .CodeMirror pre.CodeMirror-line-like{
    line-height: 2rem;
}
.CodeMirror-gutters {
    border-right: unset;
    background-color: #f7f7f7;
    white-space: nowrap;
}
.CodeMirror-code div.CodeMirror-linenumber {
    text-align: center;
    line-height: 2rem;
}




/* --- 响应式设计 (移动端适配) --- */
@media screen and (max-width: 768px) {
    .page-container .how-to-use{
        padding: 1rem;
    }
    .page-container .banner{
        padding: 2rem 1rem;
    }
    .page-container .main-features{
        padding: 1rem;
    }
    .page-container .dive-deeper{
        padding: 1rem;
    }

    section {
        padding: 2rem 0;
    }

    /* 步骤网格和特征网格在移动端都变为单列 */
    .steps-grid,
    .features-grid {
        grid-template-columns: 1fr;
    }

    /* 教程链接垂直排列 */
    .tutorial-links {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        padding-left: 0;
    }
    .code-areas {
        display: flex;
        flex-flow: column;
        align-items: center;
        width: 100%;
        gap: 2rem;
    }
}

@media screen and (max-width: 1024px) {
    .top1,.top2{
        padding: 1rem;
    }

}

@media screen and (max-width: 1280px) {
    .converter-container{
        padding: 0;
    }
    .code-wrapper {
        flex: 1;
        position: relative;
        max-width: 48%;
    }
    #toolbar .wrapper .header2023 .header2023-container{
        padding: 0;
    }
}
@media screen and (min-width: 1024px) {
    .top2 div.wrapper h2 {
        padding-top: 2.85714rem;
    }
    #convert-btn{
        margin-bottom: 3.57143rem;
        margin-top: 0.71428571rem;
    }




    /* --- 椭圆英雄区域 --- */
    .elliptical-hero {
        position: relative; /* 为伪元素提供定位锚点 */
        padding: 4rem 0; /* 给内部内容一些上下边距 */
        overflow: hidden;   /* 隐藏可能溢出的伪元素部分，保持页面整洁 */
    }

    /* 这是创建椭圆背景的核心 */
    .elliptical-hero::before {
        content: ''; /* 伪元素必需 */
        position: absolute;

        /* 关键：定位和尺寸 */
        width: 105rem;   /* 宽度是视口的1.5倍，确保它足够宽以形成平缓的椭圆弧度 */
        height: 50rem;  /* 椭圆的垂直高度 */
        left: 50%;      /* 水平居中 */
        transform: translateX(-50%); /* 精准水平居中 */

        border-radius: 50%; /* 将矩形变成椭圆形 */

        /* 关键：应用您指定的线性渐变 */
        background: linear-gradient(
                to bottom,                     /* 从上到下 */
                rgba(215, 250, 255, 0.8),     /* 起始颜色 */
                rgba(255, 255, 255, 0)         /* 结束颜色 (透明白) */
        );

        z-index: 1; /* 确保伪元素在内容之下 */
    }

    /* --- 内容区域样式 --- */
    .how-to-use {
        position: relative; /* 确保内容在伪元素之上 */
        z-index: 2;
        max-width: 64.2857rem;
        margin: 0 auto; /* 内容水平居中 */
    }



    /* --- 椭圆英雄区域 --- */
    .elliptical-hero2 {
        position: relative; /* 为伪元素提供定位锚点 */
        /*padding: 4rem 0; !* 给内部内容一些上下边距 *!*/
        overflow: hidden;   /* 隐藏可能溢出的伪元素部分，保持页面整洁 */
    }

    /* 这是创建椭圆背景的核心 */
    .elliptical-hero2::before {
        content: ''; /* 伪元素必需 */
        position: absolute;

        /* 关键：定位和尺寸 */
        width: 105rem;   /* 宽度是视口的1.5倍，确保它足够宽以形成平缓的椭圆弧度 */
        height: 55.71428rem;  /* 椭圆的垂直高度 */
        left: 50%;      /* 水平居中 */
        transform: translateX(-50%); /* 精准水平居中 */

        border-radius: 50%; /* 将矩形变成椭圆形 */

        /* 关键：应用您指定的线性渐变 */
        background: linear-gradient(
                to bottom,                     /* 从上到下 */ /* 起始颜色 */
                rgba(255, 255, 255, 0) ,
                rgba(215, 250, 255, 0.8)/* 结束颜色 (透明白) */
        );

        z-index: 1; /* 确保伪元素在内容之下 */
    }
    .dive-deeper,.main-features {
        position: relative; /* 确保内容在伪元素之上 */
        z-index: 2;
        margin: 0 auto; /* 内容水平居中 */
    }
    .code-wrapper {
        flex: 1;
        position: relative;
        max-width: 48%;
    }









}
@media screen and (min-width: 1400px) {
    .top2 .banner-bg{
        max-width: 100.0rem;
        position: relative;
        background: url("/tools/images/c.png") no-repeat top;
        /*padding-top: 2.85714rem;*/
        margin: 0 auto;
    }
    #page .section-title h1{
        margin-top: 2rem;
        margin-bottom: 1.42857rem;
    }
    .section-title {
        text-align: center;
        margin-bottom: 2.85714rem;
    }
    .steps-grid {
        gap: 3rem 10rem;
    }
    .step-item p {
        max-width: unset;
    }
    .page-container .main-features{
        width: 85.71429rem;
        max-width: 85.71429rem;
        padding: 0;
    }
    .features-grid{
        width: 85.71429rem;
        max-width: 85.71429rem;
    }
    #page .section-title h2{
        margin-top: 3.7142857rem;
        margin-bottom: 1.42857rem;
    }
    .dive-deeper .section-title {
        text-align: center;
        margin-bottom: 2.14286rem;
    }
    .tutorial-links{
        margin-bottom: 4.0rem;
    }
    .page-container .how-to-use{
        margin-bottom: 5.0rem;
    }
    .code-wrapper {
        flex: 1;
        position: relative;
        max-width: 41.857rem;
    }
}