/* ========== 基础重置 ========== */
        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            background: linear-gradient(135deg, #eff6ff 0%, #e0e7ff 100%);
            font-family: system-ui, -apple-system, sans-serif;
            color: #374151;
        }





    a { text-decoration: none; color: inherit; }
        ul { list-style: none; }
        [x-cloak] { display: none !important; }

        /* ========== 导航栏容器 - 深色隔离 ========== */
        .site-nav {
            position: sticky;
            top: 0;
            z-index: 100;
            background-color: #27C8F5;       /* indigo-600，与浅色正文强对比 */
            border-bottom: 2px solid #27C8F5; /* 明确色块边界 */
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
            color: #fff;
        }
        .nav-inner {
            max-width:100%;
			margin-inline: auto; 
            padding: 0 2rem  !important; 
            height: 5rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
           position: relative;
        }

        /* ========== Logo + 打字机 ========== */
        .logo {
            font-size: 1.5rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            user-select: none;
            z-index: 110;
		
        }
        @keyframes blink {
            0%, 100% { border-color: transparent; }
            50%      { border-color: #fff; }
        }
        .typewriter-cursor {
            display: inline-block;
            overflow: hidden;
            white-space: nowrap;
            border-right: 2px solid #fff;
            padding-right: 0.25rem;
            animation: blink 1s step-end infinite;
        }

        /* ========== 桌面端菜单 (≥768px) ========== */

.desktop-menu {
    display: none;
    align-items: center;
    gap: 2rem;

    /* 绝对定位：完全脱离文档流 */
    position: absolute;
    right: 0rem;              /* 🔑 与 nav-inner 的 padding 对齐 */
    top: 50%;
    transform: translateY(-50%);

    /* 防止菜单项换行 */
    min-width: max-content;
}
	
        .desktop-link {
            position: relative;
            padding: 1.25rem 0;
            transition: color 0.2s;
        }
        .desktop-link:hover { color: #c7d2fe; }
        /* 下划线动画 */
        .desktop-link::after {
            content: '';
            position: absolute;
            bottom: 0.75rem;
            left: 0;
            width: 100%;
            height: 2px;
            background: #fff;
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.2s;
        }
        .desktop-link:hover::after { transform: scaleX(1); }
        /* 箭头旋转 */
        .desktop-link .arrow {
            width: 1rem;
            height: 1rem;
            margin-left: 0.25rem;
            transition: transform 0.2s;
        }
        .dropdown-wrapper {
         position: relative; /* 必须！这是下拉菜单对齐的基准 */
}

       .dropdown-panel {
    position: absolute;
    top: 100%;       /* 紧贴触发文字底部 */
    left: 0;         /* 🔑 核心修复：左边缘与父级(li)左对齐 */
 
    background: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.15);
 
    padding: 0.5rem 0;
    z-index: 105;
    visibility: hidden;
    opacity: 0;
    transform: translateY(0.5rem);
    transition: all 0.2s ease-out;
	/**新增**/
	padding-top: 0.5rem;
	
	
}
.dropdown-wrapper--right .dropdown-panel {
    left: auto;
    right: 0;
}

        /* 透明桥接区域，防止鼠标移向面板时丢失hover */
        .dropdown-panel::before {
            content: '';
            position: absolute;
            top: -0.75rem;
            left: 0;
            width: 100%;
            height: 0.75rem;
        }
        .dropdown-wrapper:hover .dropdown-panel {
            visibility: visible;
            opacity: 1;
            transform: translateY(0);
        }
        .dropdown-item {
            display: block;
            padding: 0.625rem 1rem;
            font-size: 0.9375rem;
            color: #374151;
            transition: background 0.15s, color 0.15s;
        }
        .dropdown-item:hover {
            background: #eef2ff;
            
        }

        .dropdown-item-link-sub{
            padding-left: calc(16px + 2em); /* 原始左内边距 + 两格缩进 */
        font-size: 0.85em;              /* 相对于父级链接小一号 */
        color: #4b5563;                 /* 略浅的颜色，强化层级感 */

        }
   
        .dropdown-item-link-sub:hover,
.mobile-sub-link--sub:focus {
    color: #0A9EC7;;            }


        /* Language 下拉右对齐 */
        .dropdown-wrapper--right .dropdown-panel { left: 0; right: auto ; }

        /* ========== 移动端汉堡按钮 (<768px) ========== */
        .hamburger-label {
		     z-index: 130 !important;   /* 高于 .mobile-drawer 的 120 */
		
		
           /** display: flex;           /* 默认显示，媒体查询中隐藏 */
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 2.5rem;
            height: 2.5rem;
            cursor: pointer;
            z-index: 110;
            gap: 5px; 
        }
        .hamburger-line {
            display: block;
            width: 1.5rem;
            height: 2px;
            background: #fff;
            border-radius: 2px;
            transition: transform 0.3s, opacity 0.3s;
            transform-origin: center;
        }
        /* Checkbox 状态驱动汉堡动画 */
        #mobile-toggle:checked ~ .hamburger-label .line-1 { transform: translateY(7px) rotate(45deg); }
        #mobile-toggle:checked ~ .hamburger-label .line-2 { opacity: 0; }
        #mobile-toggle:checked ~ .hamburger-label .line-3 { transform: translateY(-7px) rotate(-45deg); }

        /* ========== 移动端遮罩 & 抽屉 ========== */
        .mobile-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.5);
            backdrop-filter: blur(2px);
            z-index: 104;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s;
        }
        .mobile-drawer {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            width: min(80vw, 20rem);
            background: #fff;
            z-index: 120;  /*105*/
            box-shadow: -4px 0 20px rgba(0,0,0,0.15);
            overflow-y: auto;
            transform: translateX(100%);
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease-out;
			/* 新增 */
			padding-top: 5rem; 
        }
        /* Checkbox 状态驱动抽屉展开 */
        #mobile-toggle:checked ~ .mobile-overlay { opacity: 1; visibility: visible; }
        #mobile-toggle:checked ~ .mobile-drawer  { transform: translateX(0); opacity: 1; visibility: visible; }

	
        .drawer-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.25rem 1.5rem;
            border-bottom: 1px solid #f3f4f6;
        }
        .drawer-title { font-size: 1.125rem; font-weight: 700; color: #1e1b4b; }
        .close-label  { cursor: pointer; color: #9ca3af; transition: color 0.2s; }
        .close-label:hover { color: #1e1b4b; }
        .close-icon { width: 1.5rem; height: 1.5rem; }

        /* 移动端链接 */
        .mobile-link {
            display: block;
            padding: 0.875rem 1.5rem;
            font-size: 1rem;
            font-weight: 500;
            color: #374151;
            transition: background 0.15s, color 0.15s;
        }
        .mobile-link:hover { background: #eef2ff; color: #0A9EC7; }

        /* 移动端子菜单折叠 (纯CSS details) */
        .mobile-submenu summary {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.875rem 1.5rem;
            font-size: 1rem;
            font-weight: 500;
            color: #374151;
            cursor: pointer;
            list-style: none;
            transition: background 0.15s, color 0.15s;
        }
        .mobile-submenu summary::-webkit-details-marker { display: none; }
        .mobile-submenu summary:hover { background: #eef2ff; color: #0A9EC7; }
        .mobile-submenu summary .sub-arrow {
            width: 1rem;
            height: 1rem;
            color: #9ca3af;
            transition: transform 0.2s;
        }
        .mobile-submenu[open] summary .sub-arrow { transform: rotate(180deg); }
        .mobile-sub-list {
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            background: #f9fafb;
            transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
            padding: 0;
        }
        .mobile-submenu[open] > .mobile-sub-list {
            max-height: 300px;
            opacity: 1;
            padding: 0.25rem 0;
        }
        .mobile-sub-link {
            display: block;
            padding: 0.75rem 1.5rem 0.75rem 2.5rem;
            font-size: 0.875rem;
            color: #4b5563;
            transition: background 0.15s, color 0.15s;
        }
        .mobile-sub-link:hover { background: #eef2ff; color: #0A9EC7; }

                /* 子级链接样式：缩进 + 小一号字体 */
        .mobile-sub-link--sub {
            padding-left: calc(16px + 3rem); /* 原始左内边距 + 两格缩进 */
            font-size: 0.85em;              /* 相对于父级链接小一号 */
            color: #4b5563;                 /* 略浅的颜色，强化层级感 */
        }

        /* 确保悬停/聚焦状态也继承子级样式 */
        .mobile-sub-link--sub:hover,
        .mobile-sub-link--sub:focus {
            color: #1E3A4F;                 /* 悬停时恢复主色，保持可交互反馈 */
        }

        /* ========== 响应式断点 ========== */
        @media (min-width: 768px) {
            .desktop-menu     { display: flex !important; }
            .hamburger-label,
            .mobile-overlay,
            .mobile-drawer    { display: none !important; }
        }
        @media (max-width: 767px) {
            .desktop-menu     { display: none !important; }
            .hamburger-label  { display: flex !important; }
            /* mobile-overlay / mobile-drawer 默认可见性由checkbox控制，此处不设display:none */
        }

        /* ========== Target高亮动画 ========== */
        :target { animation: highlight 3s ease-out forwards; }
        @keyframes highlight {
            0%   { background-color: #fde047; box-shadow: 0 0 10px #facc15; }
            50%  { background-color: #fef08a; box-shadow: 0 0 15px #facc15; }
            100% { background-color: transparent; box-shadow: none; }
        }


         /* Main Content  */

            /* --- 基础重置与布局 --- */
            .main-content {
                flex: 1;
            }

            .converter-section {
                padding: 4rem 1rem; /* py-16 px-4 */
            }

            .container {
                max-width: 56rem; /* max-w-4xl */
                margin-left: auto;
                margin-right: auto;
            }

            /* --- 标题与副标题 --- */
            .page-title {
                font-size: 2.25rem; /* text-4xl */
                font-weight: 700;
                text-align: center;
                color: #27C8F5; /* indigo-700 */
                margin-bottom: 1rem;
            }

            @media (min-width: 768px) {
                .page-title {
                    font-size: 3rem; /* md:text-5xl */
                }
            }

            .page-subtitle {
                text-align: center;
                color: #4b5563; /* gray-600 */
                margin-bottom: 3rem; /* mb-12 */
                font-size: 1.125rem; /* text-lg */
                line-height: 1.75rem;
            }

            .highlight-text {
                font-weight: 600; /* font-semibold */
            }

            /* --- 转换器卡片 --- */
            .converter-card {
                background-color: #ffffff;
                border-radius: 1rem; /* rounded-2xl */
                box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* shadow-xl */
                padding: 2rem; /* p-8 */
            }

            @media (min-width: 768px) {
                .converter-card {
                    padding: 3rem; /* md:p-12 */
                }
            }

            /* --- 输入框区域布局 --- */
            .input-wrapper {
                display: flex;
                flex-direction: column;
                gap: 1.5rem; /* gap-6 */
                justify-content: center;
                align-items: center;
                margin-bottom: 2rem; /* mb-8 */
            }

            @media (min-width: 768px) {
                .input-wrapper {
                    flex-direction: row;
                }
            }

            .input-block {
                flex: 1;
                width: 100%;
            }

            /* 输入框错误态 */
                .temp-input--error {
                    border-color: #ef4444;
                    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
                }

                /* 错误提示文字 */
                .input-error-msg {
                    margin-top: 0.375rem;
                    font-size: 0.75rem;
                    color: #ef4444;
                    line-height: 1.4;
                }

            .input-label {
                display: block;
                font-size: 0.875rem; /* text-sm */
                font-weight: 500;
                color: #374151; /* gray-700 */
                margin-bottom: 0.5rem;
            }

            .temp-input {
                width: 100%;
                padding: 0.75rem 1rem; /* px-4 py-3 */
                border: 2px solid #e5e7eb; /* border-gray-200 */
                border-radius: 0.75rem; /* rounded-xl */
                font-size: 1.125rem; /* text-lg */
                transition: all 0.2s;
                outline: none;
            }

            .temp-input:focus {
                border-color: #6366f1; /* focus:border-indigo-500 */
            }

            /* --- 交换图标 --- */
            .swap-icon-container {
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
                transform: translateY(0.75rem); /* translate-y-3 (用于在移动端垂直居中) */
            }

            .swap-icon {
                width: 2rem; /* w-8 */
                height: 2rem; /* h-8 */
                color: #27C8F5; /* blue-600 */
                transition: all 0.3s;
                animation: spin-slow 8s linear infinite;
            }

            .swap-icon:hover {
                color: #1e40af; /* hover:text-blue-800 */
                animation-duration: 1s; /* 悬停加速 */
            }

            @keyframes spin-slow {
                from { transform: rotate(0deg); }
                to { transform: rotate(360deg); }
            }

            /* --- 清空按钮 --- */
            .clear-btn-wrapper {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 0.5rem;
            }

            .clear-btn {
                position: relative;
                overflow: hidden;
                padding: 0.75rem 2rem; /* px-8 py-3 */
                background-color: #27C8F5; /* bg-red-500 */
                color: #fff;
                font-weight: 600;
                border-radius: 8px;
                border: none;
                cursor: pointer;
               
                font-size: 1rem; 
                 transition:
                background-color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform  0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            }

            .clear-btn:hover {
                 background-color: #1ba8d6;
               /* background: rgba(39, 200, 245, 0.15); */
                 transform: translateY(-1px);
              box-shadow: 0 4px 12px rgba(39, 200, 245, 0.3);
            }

             .clear-btn::after {
            content: '';
            position: absolute;
            top: 0; left: -100%;
            width: 60%;
            height: 100%;
            background: linear-gradient(
                105deg, 
                transparent 40%, 
                rgba(255,255,255,0.35) 50%, 
                transparent 60%
            );
           transition: left 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            pointer-events: none;
            }

            .clear-btn:hover::after {
            left: 120%;
            }
    

            .helper-text {
                font-size: 0.875rem;
                color: #6b7280; /* gray-500 */
            }

            /* --- 说明区域 --- */
            .how-to-section {
                margin-top: 3rem;
                text-align: center;
            }

            .section-title {
                font-size: 1.5rem;
                font-weight: 700;
                color: #1f2937;
                margin-bottom: 1rem;
            }

            .info-box {
                background-color: white;
                border-radius: 0.75rem;
                padding: 1.5rem;
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
                text-align: left;
                max-width: 48rem;
                margin: 0 auto;
            }

            .info-box p {
                color: #4b5563;
                line-height: 1.625;
}

.description-text {
    position: relative;
    padding-left: 1.25em;       /* 为圆点腾出空间 */
    line-height: 1.7;
    margin-bottom: 1em;
}

.description-text::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.65em;               /* 垂直居中对齐首行文字 */
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #3b82f6;  /* 圆点颜色，可换成 currentColor 跟随文字色 */
}

.description-text:last-child {
    margin-bottom: 0;
}

            /* 说明文字样式 */
            .description-text {
                /* 对应 text-gray-600 */
                color: #4b5563; 
                
                /* 对应 leading-relaxed (1.625倍行高) */
                line-height: 1.625; 
                
                /* 保持段落的基础间距（可选） */
                margin: 0; 
            }

            /* 对应 text-gray-600 text-center mt-4 */
            .formula-desc-left {
                color: #FFFFFF;       /* text-gray-600 */
                text-align: left;   /* text-center */
                margin-top: 1rem;     /* mt-4 = 1rem (16px) */
            }
            
            .formula-desc-right {
                color: #0E6E8C;       /* text-gray-600 */
                text-align: left;   /* text-center */
                margin-top: 1rem;     /* mt-4 = 1rem (16px) */
            }

            .formula-desc-left .desc-point   {
                display: inline-block; /* 关键：让伪元素相对于该行文本定位 */
                margin-bottom: 6px;    /* 控制各点之间的垂直间距 */
                line-height: 1.6;      /* 保证多行文本时的可读性 */
            }

            /* 生成小圆点 */
            .formula-desc-left .desc-point::before {
                content: "•";          /* 小圆点字符 */
                color: #1E3A4F;        /* 与公式SVG中的主色调保持一致 */
                font-weight: bold;
                margin-right: 8px;     /* 圆点与文字的间距 */
                display: inline-block;
                width: 12px;           /* 固定宽度防止缩进错位 */
            }

            /* 最后一个点不需要底部间距（可选） */
            .formula-desc-left .desc-point:last-child {
                margin-bottom: 0;
            }

            .formula-desc-right .desc-point {
                display: inline-block; /* 关键：让伪元素相对于该行文本定位 */
                margin-bottom: 6px;    /* 控制各点之间的垂直间距 */
                line-height: 1.6;      /* 保证多行文本时的可读性 */
            }

            /* 生成小圆点 */
            .formula-desc-right .desc-point::before {
                content: "•";          /* 小圆点字符 */
                color: #1E3A4F;        /* 与公式SVG中的主色调保持一致 */
                font-weight: bold;
                margin-right: 8px;     /* 圆点与文字的间距 */
                display: inline-block;
                width: 12px;           /* 固定宽度防止缩进错位 */
            }

            /* 最后一个点不需要底部间距（可选） */
            .formula-desc-right .desc-point:last-child {
                margin-bottom: 0;
            }



                 /* --- 公式模块容器与标题 --- */
            .formulas-section {
                padding: 4rem 1rem;
                background-color: #F5F5F5;
            }
   
            .formulas-container {
            width: 100%;
            max-width: 64rem;      /* max-w-5xl = 64rem (1024px) */
            margin-left: auto;     /* mx-auto */
            margin-right: auto;    /* mx-auto */
            padding-left: 1rem;    /* 可选：防止小屏幕下内容贴边 */
            padding-right: 1rem;
            }

            .formula-heading {
                font-size: 1.875rem; /* text-3xl */
                font-weight: 700;
                text-align: center;
                color: #1f2937; /* gray-800 */
                margin-bottom: 3rem; /* mb-12 */
            }

          

            /* --- 响应式网格布局 (对应 md:grid-cols-2) --- */
            .formula-grid {
                display: grid;
                grid-template-columns: 1fr;
                gap: 2rem; /* gap-8 */
            }

            @media (min-width: 768px) {
                .formula-grid {
                    grid-template-columns: repeat(2, minmax(0, 1fr));
                }
            }

            /* --- 公式卡片通用样式 --- */
            .formula-card {
                border-radius: 1rem; /* rounded-2xl */
                padding: 2rem;
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); /* shadow-lg */
            }

            /* 橙色卡片背景 (Celsius to Fahrenheit) */
            .card-left {
                background: linear-gradient(to bottom right, #FF8A65, #FF7043); /* from-orange-50 to-yellow-50 */
            }

            /* 蓝色卡片背景 (Fahrenheit to Celsius) */
            .card-right {
                background: linear-gradient(to bottom right, #E8F7FC, #D9F2FA);; /* from-blue-50 to-indigo-50 */
            }

            .formula-card-title {
                font-size: 1.25rem; /* text-xl */
                font-weight: 700;
                text-align: center;
                margin-bottom: 1.5rem;
            }
            
        

            /* --- 公式展示框与复制按钮 --- */
            .formula-display-wrapper {
                display: flex;
                flex-direction: column;
                align-items: center;
            }

            .formula-box {
                background-color: #ffffff;
                border-radius: 0.75rem;
                padding: 1.5rem;
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
                margin-bottom: 1rem;
                position: relative; /* 用于定位复制按钮 */
                width: 100%;
                max-width: 320px;
                display: flex;
                justify-content: center;
            }

            /* 复制按钮样式 */
            .copy-btn {
                position: absolute;
                top: 0.75rem;
                right: 0.75rem;
                display: flex;
                align-items: center;
                gap: 0.375rem;
                padding: 0.375rem 0.75rem;
                font-size: 0.75rem;
                font-weight: 500;
                color: #6b7280;
                background-color: #f9fafb;
                border: 1px solid #e5e7eb;
                border-radius: 0.5rem;
                cursor: pointer;
                transition: all 0.2s;
            }

            .copy-btn:hover {
                background-color: #eef2ff; /* hover:bg-indigo-50 */
                color: #4f46e5; /* hover:text-indigo-600 */
            }

            /* 复制成功状态 */
            .copy-btn.copied {
                background-color: #f0fdf4;
                color: #16a34a;
                border-color: #bbf7d0;
            }

            /* SVG 图标控制 */
            .copy-btn svg {
                width: 1rem;
                height: 1rem;
            }
            .copy-btn .icon-success {
                display: none;
            }
            .copy-btn.copied .icon-copy {
                display: none;
            }
            .copy-btn.copied .icon-success {
                display: block;
            }
            /* 对应 w-full h-32 max-w-[320px] */
            .formula-svg {
                 width: 100%;       /* w-full */
                height: 8rem;      /* h-32 = 8rem (128px) */
                 max-width: 320px;  /* max-w-[320px] */
             }
        
            /* --- 底部说明区域 --- */
            .formula-description-box {
                margin-top: 3rem;
                background-color: #f9fafb; /* bg-gray-50 */
                border-radius: 0.75rem;
                padding: 2rem;
                text-align: center;
                max-width: 56rem; /* max-w-4xl */
                margin-left: auto;
                margin-right: auto;
            }

            .desc-title {
                font-size: 1.5rem;
                font-weight: 700;
                color: #1f2937;
                margin-bottom: 1rem;
            }

            .desc-list {
                list-style: none;
                padding: 0;
                text-align: left;
                color: #4b5563;
                line-height: 1.625;
                font-size: 1.125rem;
            }

            .desc-list li {
                display: flex;
                align-items: flex-start;
                margin-bottom: 1rem;
            }

            .list-bullet {
                display: inline-block;
                margin-right: 0.75rem;
                margin-top: 0.5rem;
                width: 0.5rem;
                height: 0.5rem;
                background-color: #6366f1; /* indigo-500 */
                border-radius: 50%;
                flex-shrink: 0;
            }

            .desc-subtitle {
    font-size: 1rem;
    font-weight: 700;           /* 粗体 */
    text-align: left;           /* 靠左对齐 */
    color: #1f2937;
    margin-top: 1.5rem;         /* 与上方内容拉开章节间距 */
    margin-bottom: 0.75rem;     /* 与下方列表保持紧凑 */
    line-height: 1.4;
}

/* 第一个 h4 不需要额外顶部间距（紧跟 h3） */
.desc-title + .desc-subtitle {
    margin-top: 1rem;
}

                        /* 对应 flex items-start */
            .formula-list-item {
                display: flex;        /* flex */
                align-items: flex-start; /* items-start */
            }
            /* ========== 标题颜色变体 ========== */
            .title-left {
                color: #fff; /* text-orange-700 */
            }
             .title-right{
                color:  #0E6E8C; /* text-orange-700 */
            }

            /* Alpine.js 动态状态：复制成功 */
            .copy-btn--success {
                background-color: #f0fdf4 !important;
                color: #16a34a !important;
                border-color: #bbf7d0 !important;
            }


            .desc-card {
                position: relative;
                background-color: #ffffff;
                border-radius: 0.75rem;
                padding: 1.5rem;
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
                margin-bottom: 1rem;
            }


/* ========== 复制按钮（卡片内嵌式） ========== */
.copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #6b7280;
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.copy-btn:hover {
    background-color: #eef2ff;
    color: #4f46e5;
}

/* Alpine.js 动态状态：复制成功 */
.copy-btn--success {
    background-color: #f0fdf4 !important;
    color: #16a34a !important;
    border-color: #bbf7d0 !important;
}

/* ========== 描述卡片（第二个公式的白色卡片） ========== */
.desc-card {
    position: relative;
    background-color: #ffffff;
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    margin-bottom: 1rem;
}

        /* ========== 描述卡片内的复制按钮（右上角绝对定位） ========== */
        .desc-copy-btn {
            position: absolute;
            top: 0.75rem;
            right: 0.75rem;
            display: flex;
            align-items: center;
            gap: 0.375rem;
            padding: 0.375rem 0.75rem;
            font-size: 0.75rem;
            font-weight: 500;
            color: #6b7280;
            background-color: #f9fafb;
            border: 1px solid #e5e7eb;
            border-radius: 0.5rem;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .desc-copy-btn:hover {
            background-color: #eef2ff;
            color: #4f46e5;
        }

        .desc-copy-btn--success {
            background-color: #f0fdf4 !important;
            color: #16a34a !important;
            border-color: #bbf7d0 !important;
        }
      /* ========== 小图标（w-4 h-4） ========== */
        .icon-sm {
            width: 1rem;
            height: 1rem;
        }

        /* ========== 通用布局 ========== */
.conversion-section {
    padding: 4rem 1rem;
    background: linear-gradient(to bottom right, #eef2ff, #faf5ff);
}

.resources-section {
    padding: 4rem 1rem;
    background-color: #ffffff;
}

.section-container {
    max-width: 56rem;
    margin: 0 auto;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    color: #1f2937;
    margin-bottom: 1rem;
}

.section-title--mb-lg {
    margin-bottom: 3rem;
}

.section-subtitle-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    margin-bottom: 1.5rem;
}

.section-subtitle {
    color: #4b5563;
    max-width: 48rem;
    text-align: left;
    line-height: 1.625;
    font-size: 1.25rem
}

/* ========== 动态转换表 ========== */
.table-card {
    background-color: #ffffff;
    border-radius: 1rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.table-scroll {
    overflow-x: auto;
}

.conversion-table {
    width: 100%;
    border-collapse: collapse;
}

.conversion-table tbody tr {
    border-bottom: 1px solid #e5e7eb;
    transition: background-color 0.15s ease;
}

.table-row:hover {
    background-color: #eef2ff !important;
}

.table-row--even {
    background-color: #f9fafb;
}

.table-cell {
    padding: 1rem 1.5rem;
}

.table-cell--celsius {
    font-weight: 500;
    color: #4338ca;
}

.table-cell--fahrenheit {
    color: #1f2937;
}

.table-cell--desc {
    color: #6b7280;
    font-size: 0.875rem;
}

/* ========== 子表格（20°C / 30°C） ========== */
.sub-table-card {
    margin-top: 2rem;
    background-color: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    font-size:1.25rem;
}

.sub-table-title {
    font-weight: 700;
    color: #4338ca;
    border-top-width: 0px;
    background-color: #eef2ff;
    border-bottom: 1px solid #e5e7eb;
    margin-top: 0px;
    border-bottom-width: 5px;
    margin-bottom: 0px;
    height: 65px;
    border-top-style: solid;
    padding-left: 10px;
    padding-top: 10px;
}

.sub-table {
    width: 100%;
    font-size: 0.875rem;
    border-collapse: collapse;
    font-size:1.25rem
}

.sub-table-head {
    background-color: #f3f4f6;
}

.sub-table-th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    color: #4b5563;
    padding-left: 0rem;
}

.sub-table tbody tr {
    border-bottom: 1px solid #e5e7eb;
    transition: background-color 0.15s ease;
}

.sub-table-row:hover {
    background-color: #fefce8;
}

.sub-table-row{
    height: 60px;
    font-size:1rem;
     line-height: 1.6;
    padding-right: 1rem;
    padding-bottom: 1px;
}


.sub-table-td {
    color: #374151;
    scroll-margin-top: 6rem;
    margin-right: 2px;
    padding-right: 0.5rem;
    padding-bottom: 5px;
    padding-top: 3px;
    padding-right: 2.5rem;
    padding-left: 0rem;
}


/* =========================================
   桌面端（默认）：保持原有布局，零侵入
   ========================================= */
.table-scroll-wrapper {
    position: relative;
    width: 100%;
}

/* 桌面端隐藏渐变提示 */
.table-scroll-wrapper.has-scroll::after {
    display: none;
}

/* =========================================
   移动端（≤768px）：启用横向滚动
   ========================================= */
@media (max-width: 768px) {
    .table-scroll-wrapper {
        overflow-x: auto !important;         /* 【核心】开启水平滚动 */
        -webkit-overflow-scrolling: touch;   /* iOS 惯性滚动 */
        touch-action: pan-x pan-y;           /* 防止浏览器拦截水平滑动手势 */
    }

    /* 【核心】强制表格保持固有宽度，不被手机屏幕压缩 */
    .table-scroll-wrapper .sub-table {
        min-width: 640px !important;
        width: max-content;
    }

    /* 防止单元格换行导致列宽被压缩，确保 min-width 生效 */
    .table-scroll-wrapper .sub-table th,
    .table-scroll-wrapper .sub-table td {
        white-space: nowrap;
    }

    /* 移动端显示右侧渐变提示（优化为 absolute 定位） */
    .table-scroll-wrapper.has-scroll::after {
        content: '';
        position: absolute;      /* 替代 sticky+float，避免安卓 WebView 布局塌陷 */
        right: 0;
        top: 0;
        bottom: 0;
        width: 40px;
        background: linear-gradient(to left, rgba(255,255,255,0.9), transparent);
        pointer-events: none;
        z-index: 1;
        display: block;          /* 覆盖桌面端的 display:none */
    }
}

.sub-table-td--kelvin {
    font-weight: 500;
    color: #4338ca;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-bottom: 2.5px;
}




/* ========== 参考信息卡片 ========== */
.ref-card {
    margin-top: 2rem;
    background-color: #ffffff;
    border-radius: 0.75rem;
    padding: 0.6rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    max-width: 46.5rem;
    margin-left: auto;
    margin-right: auto;
    font-size: large
}

.ref-title {
    font-weight: 800;
    color: #1f2937;
    margin-bottom: 1rem;
    padding-left: 1.5rem;
    
}

.ref-list {
    color: #4b5563;
    /* list-style: disc inside; */
}

.ref-list li + li {
    margin-top: 0.5rem;
}





/* ========== 资源卡片网格 ========== */
.resource-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 72rem;
    margin: 0 auto;
    padding: 1rem;
}

@media (min-width: 768px) {
    .resource-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.resource-card {
    display: block;
    color: #ffffff;
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    text-decoration: none;
}

.resource-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    transform: translateY(-0.25rem);
}

.resource-icon {
    font-size: 2.25rem;
    margin-bottom: 1rem;
    transition: transform 0.3s ease;
}

.resource-card:hover .resource-icon {
    transform: scale(1.1);
}

.resource-name {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.resource-desc {
    font-size: 0.875rem;
    font-weight: 500;
    opacity: 0.95;
}

/* 资源卡片颜色变体 */
.resource-card--sky    { background: linear-gradient(to bottom right, #38bdf8, #3b82f6); }
.resource-card--sky .resource-desc    { color: #eff6ff; }

.resource-card--violet { background: linear-gradient(to bottom right, #a78bfa, #a855f7); }
.resource-card--violet .resource-desc { color: #faf5ff; }

.resource-card--blue   { background: linear-gradient(to bottom right, #2563eb, #4338ca); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); }
.resource-card--blue:hover { box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); }
.resource-card--blue .resource-desc   { color: #dbeafe; }

.resource-card--fuchsia{ background: linear-gradient(to bottom right, #d946ef, #db2777); }
.resource-card--fuchsia .resource-desc{ color: #fdf2f8; }

.resource-card--rose   { background: linear-gradient(to bottom right, #fb7185, #ef4444); }
.resource-card--rose .resource-desc   { color: #fff1f2; }

.resource-card--teal   { background: linear-gradient(to bottom right, #2dd4bf, #10b981); }
.resource-card--teal .resource-desc   { color: #f0fdfa; }

/* ========== FAQ 区域 ========== */
.faq-wrapper {
    margin-top: 3rem;
    text-align: center;
}

.faq-heading {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 1rem;
}

.faq-intro {
    color: #4b5563;
    line-height: 1.625;
    max-width: 48rem;
    margin: 0 auto 1.5rem;
    text-align: left;
     font-size: 1.125rem
}

.faq-question {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 1rem;
    text-align: left;
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.faq-question--mt {
    margin-top: 2rem;
}

.faq-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    background-color: #e0e7ff;
    color: #4f46e5;
    border-radius: 50%;
    font-size: 0.875rem;
    font-weight: 700;
    flex-shrink: 0;
}

.faq-answer {
    color: #4b5563;
    line-height: 1.625;
    max-width: 48rem;
    margin: 0 auto 1.5rem;
    text-align: left;
    font-size:1.25rem
}

.faq-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.faq-tag {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 1.125rem;
    border-width: 2px;
    border-style: solid;
    transition: background-color 0.15s ease;
    text-decoration: none;
}

.faq-tag--indigo { background-color: #e0e7ff; color: #4338ca; border-color: #a5b4fc; }
.faq-tag--indigo:hover { background-color: #c7d2fe; }

.faq-tag--blue   { background-color: #dbeafe; color: #1d4ed8; border-color: #93c5fd; }
.faq-tag--blue:hover   { background-color: #bfdbfe; }

.faq-tag--orange { background-color: #ffedd5; color: #c2410c; border-color: #fdba74; }
.faq-tag--orange:hover { background-color: #fed7aa; }

/* ========== Footer ========== */
.site-footer {
    background-color: #1f2937;
    color: #ffffff;
    padding: 3rem 1rem;
}

.footer-container {
    max-width: 56rem;
    margin: 0 auto;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .footer-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.footer-heading {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.footer-text {
    color: #9ca3af;
    font-size: 0.875rem;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li + li {
    margin-top: 0.5rem;
}

.footer-links a {
    color: #9ca3af;
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 0.15s ease;
}

.footer-links a:hover {
    color: #ffffff;
}

.footer-bottom {
    border-top: 1px solid #374151;
    padding-top: 2rem;
    text-align: center;
    color: #9ca3af;
    font-size: 0.875rem;
}
       

/* ========== 徽章展示栏 ========== */
.badge-bar {
    background-color: #111827; /* bg-gray-900 */
    padding: 1.5rem 1rem;     /* py-6 px-4 */
}

.badge-bar__container {
    max-width: 56rem;          /* max-w-4xl */
    margin: 0 auto;            /* mx-auto */
    display: flex;
    justify-content: center;   /* justify-center */
    gap: 1.5rem;               /* gap-6 */
    flex-wrap: wrap;           /* flex-wrap */
}

.badge-bar__link {
    display: inline-block;
    line-height: 0;            /* 消除 img 底部空白 */
    transition: opacity 0.2s ease;
}

.badge-bar__link:hover {
    opacity: 0.8;
}