写好主页面

index.html

@@ -116,7 +116,7 @@
         <span class="text-gray-300">|</span>
         <a class="text-gray-700 hover:text-orange-500 font-medium">操作指南</a>
         <span class="text-gray-300">|</span>
-        <a class="bg-orange-500 text-white px-6 py-2 rounded-full font-bold hover:bg-orange-600 shadow-md">
+        <a class=" text-white px-6 py-2 rounded-full font-bold  hover:shadow-lg transition-all"  style="background: #FFA300;">
           联系我们
         </a>
       </nav>
@@ -238,76 +238,104 @@
         </div>
         <!-- 宣传项 1 - 超级云脑 -->
         <div class="bg-white rounded-3xl shadow-xl overflow-hidden mb-16 flex flex-col md:flex-row animate-fade-in">
-          <div class="md:w-1/2 promotion-image">
-            <img src="https://hc.homilychart.com/hc/250121/img/chaojiyunnaoimg.jpg" alt="智能数据分析平台" class="w-full h-full">
+          <div class="md:w-1/2 promotion-image overflow-hidden">
+            <img 
+              src="https://hc.homilychart.com/hc/250121/img/chaojiyunnaoimg.jpg" 
+              alt="DeepChart" 
+              class="w-full h-full object-cover transition-transform duration-300 hover:scale-105"
+            >
           </div>
           <div class="md:w-1/2 p-8 md:p-12 flex flex-col justify-center">
             <span
               class="inline-block px-4 py-1 rounded-full bg-red-100 text-red-600 text-base font-medium mb-4 breadcrumb-text">
               路径：DeepChart
             </span>
-            <h3 class="text-2xl md:text-3xl font-bold  heading-tertiary">DeepChart:全球最懂机构行为的AI</h3>
-            <br class="text-gray-600 mb-6 paragraph-text">
-              AI时代就用AI投资!</br>立即下载，免费体验1个月。全球首发500个名额，抢完即止!
+            <h3 class="text-2xl md:text-3xl font-bold mb-4 heading-tertiary">DeepChart: 全球最懂机构行为的AI</h3>
+            <p class="text-gray-600 mb-6 paragraph-text">
+              AI时代就用AI投资!<br>立即下载，免费体验1个月。全球首发500个名额，抢完即止!
             </p>
             <ul class="space-y-3 mb-8">
-              <li class="flex items-start list-item">
+              <li class="flex items-start text-sm">
                 <i class="fa fa-check-circle text-secondary mt-1 mr-3"></i>
-                <span>Deepmate:  Al通用大模型(弘历特色)</span>
+                <span class="flex-shrink-0 mr-1 text-gray-500">Deepmate：Al通用大模型(弘历特色)</span>
               </li>
-              <li class="flex items-start list-item">
+             <li class="flex items-start text-sm">
                 <i class="fa fa-check-circle text-secondary mt-1 mr-3"></i>
-                <span>深度探索:</span>
-                <span>股市正在从"判断方向"，进入"识别资金"的时代。<br>“深度探索”带您看透机构，深度理解市场资本本质!</span>
+                
+                <!-- 2. 修改标题：添加灰色 (text-gray-500)，保持不换行 -->
+                <span class="flex-shrink-0  text-gray-500">深度探索：</span>
+                
+                <!-- 3. 右侧文本：通过独立容器确保换行后文字左对齐，而不是跑去图标下面 -->
+                <span class="text-gray-500 leading-snug">
+                  股市正在从"判断方向"，进入"识别资金"的时代。<br>
+                  “深度探索”带您看透机构，深度理解市场资本本质!
+                </span>
               </li>
-              <li class="flex items-start list-item">
+              <!-- <li class="flex items-start list-item">
                 <i class="fa fa-check-circle text-secondary mt-1 mr-3"></i>
                 <span>体检专家：股票标的全方位健康检测</span>
-              </li>
+              </li> -->
             </ul>
-            <a href="#register" class="inline-flex items-center text-primary font-medium hover:underline">
-              加入赢在美股，解锁更多资讯 <i class="fa fa-arrow-right ml-2"></i>
+            <a href="#register" 
+              class="self-center inline-block text-white text-lg font-bold px-12 py-3 rounded-full  transition-all duration-300 hover:-translate-y-[3px] hover:shadow-md 
+                      bg-[linear-gradient(90deg,#FFAC19_0%,#FFA300_100%)]">
+              立即注册
             </a>
           </div>
         </div>
 
         <!-- 宣传项 2 - AI预测大模型 -->
         <div class="mb-6 text-center">
-          <h4 class="text-xl md:text-2xl font-semibold text-gray-800">
+          <h4 class="text-3xl md:text-4xl font-semibold text-gray-800">
             夺宝奇兵下载体验
           </h4>
         </div>
-        <div
-          class="bg-white rounded-3xl shadow-xl overflow-hidden mb-16 flex flex-col md:flex-row-reverse animate-fade-in delay-100">
-          <div class="md:w-1/2 promotion-image">
-            <img src="https://hc.homilychart.com/hc/250121/img/aiyucedamoxing.jpg" alt="AI预测大模型" class="w-full h-full">
+        <!-- 卡片容器 -->
+        <div class="bg-white rounded-3xl shadow-xl overflow-hidden mb-16 flex flex-col md:flex-row-reverse animate-fade-in delay-100">
+          
+          <!-- 右侧图片 (HTML中排第一，但 flex-row-reverse 会让它显示在右边) -->
+          <div class="md:w-1/2 promotion-image overflow-hidden">
+            <!-- 注意：请确保这里 src 引用的是截图中的夺宝奇兵界面图片 -->
+            <img 
+              src="https://d31zlh4on95l9h.cloudfront.net/files/5iujc601000dg5ealun9na5700vk67lj.png" 
+              alt="夺宝奇兵界面" 
+              class="w-full h-full object-cover transition-transform duration-300 hover:scale-105"
+            >
           </div>
-          <div class="md:w-1/2 p-8 md:p-12 flex flex-col justify-center">
-            <!-- <span
-              class="inline-block px-4 py-1 rounded-full bg-purple-100 text-accent text-base font-medium mb-4 breadcrumb-text">
-              HomilyLink > 夺宝奇兵 > AI预测大模型
-            </span> -->
-            <h3 class="text-3xl md:text-4xl font-bold mb-4 heading-tertiary">AI预测大模型</h3>
-            <p class="text-gray-600 mb-6 paragraph-text">
-              AI 预测大模型颠覆传统，以深度学习与算法挖股市数据抓趋势、预测高低点；AI时空共振结合前沿 AI与时空共振精准识别变盘点。
+
+          <!-- 左侧内容区域 (HTML中排第二，显示在左边) -->
+          <div class="md:w-1/2 p-8 md:p-12 flex flex-col justify-center text-left">
+            
+            <!-- 大标题 -->
+            <h1 class="text-3xl md:text-4xl lg:text-5xl font-bold leading-tight mb-6 text-gray-900">
+              夺宝奇兵，<br>
+              <!-- 添加了 inline-block 和 mt-3 来增加与上一行的间距 -->
+              <span class="inline-block mt-3 bg-clip-text text-transparent bg-gradient-to-r from-primary to-accent">
+                现在免费体验！
+              </span>
+            </h1>
+
+            <!-- 描述文本 -->
+            <p class="text-gray-600 mb-8 text-base md:text-lg leading-relaxed">
+              AI 时代股票投资必备机构界的黑科技！<br>
+              加入「赢在美股」，即可参与夺宝奇兵免费体验 7 天的活动，立刻注册报名吧！
             </p>
-            <ul class="space-y-3 mb-8">
-              <li class="flex items-start list-item">
-                <i class="fa fa-check-circle text-secondary mt-1 mr-3"></i>
-                <span>AI股价预测术</span>
-              </li>
-              <li class="flex items-start list-item">
-                <i class="fa fa-check-circle text-secondary mt-1 mr-3"></i>
-                <span>AI时空共振</span>
-              </li>
-              <li class="flex items-start list-item">
-                <i class="fa fa-check-circle text-secondary mt-1 mr-3"></i>
-                <span>未来预测</span>
-              </li>
-            </ul>
-            <a href="#register" class="inline-flex items-center text-primary font-medium hover:underline">
-              加入赢在美股，解锁更多资讯 <i class="fa fa-arrow-right ml-2"></i>
-            </a>
+            
+            <!-- 按钮组 -->
+            <div class="flex flex-row gap-4">
+              <!-- 按钮1：立即注册 (实心蓝) -->
+              <a href="#register" 
+                class="px-8 py-3 rounded-full bg-[#2563EB] text-white font-medium text-center shadow-md transition-all hover:bg-[#1d4ed8] hover:shadow-lg hover:-translate-y-0.5">
+                立即注册
+              </a>
+              
+              <!-- 按钮2：立刻下载 (空心蓝边框) -->
+              <a href="hcdbqb-download.html" 
+                class="px-8 py-3 rounded-full border border-[#2563EB] text-[#2563EB] font-medium text-center transition-all hover:-translate-y-0.5">
+                立刻下载
+              </a>
+            </div>
+
           </div>
         </div>
 
@@ -354,8 +382,13 @@
         </div>
         <div id="kc"
           class="bg-white rounded-3xl shadow-xl overflow-hidden flex flex-col md:flex-row animate-fade-in delay-200">
-          <div class="md:w-1/2 promotion-image">
-            <img id="lectureImage" src="" alt="John Lu谈股专题讲座" class="w-full h-full">
+          <div class="md:w-1/2 promotion-image overflow-hidden">
+            <img 
+              id="lectureImage"
+              src="" 
+              alt="专题讲座" 
+              class="w-full h-full object-cover transition-transform duration-300 hover:scale-105"
+            >
           </div>
           <div class="md:w-1/2 p-8 md:p-12 flex flex-col justify-center">
             <span
@@ -364,7 +397,7 @@
             </span>
             <h3 class="text-2xl md:text-3xl font-bold mb-4 heading-tertiary">HomilyLink专题讲座</h3>
             <p class="text-gray-600 mb-6 paragraph-text">
-              我们推出 HomilyLink专题讲座；结合市场事实热点与机构领域黑科技 "夺宝奇兵"，助力投资者提升股市获利能力。
+              我们推出 HomilyLink专题讲座;结合市场事实热点与机构领域黑科技"夺宝奇兵”，助力投资者提升股市获利能力。
             </p>
             <ul class="space-y-3 mb-8">
               <li class="flex items-start list-item">
@@ -380,7 +413,7 @@
                 <span>HomilyLink赢在美股班级群专属课程（实时答疑+干货分享）</span>
               </li>
             </ul>
-            <a href="#register" class="inline-flex items-center text-primary font-medium hover:underline">
+            <a href="#register" class="inline-flex items-center text-[#EF8800] font-medium  hover:text-[#FF5900] transition-colors">
               加入赢在美股，解锁更多资讯 <i class="fa fa-arrow-right ml-2"></i>
             </a>
           </div>
@@ -388,47 +421,55 @@
       </div>
     </section>
     <!-- 注册表单区域 -->
-    <section id="register" class="py-20 px-4 bg-white">
-      <div class="container mx-auto max-w-6xl">
+    <section id="register" class="py-20 bg-gray-50">
+      <div class="container mx-auto max-w-6xl relative">
+        <!-- 原有的注册表单部分 - 完全不变 -->
         <div class="bg-gradient-to-br rounded-3xl shadow-2xl overflow-hidden">
           <div class="grid grid-cols-1 md:grid-cols-2">
             <!-- 左侧区域 - 已替换背景 -->
             <div class="p-8 md:p-12 text-white flex flex-col justify-center bg-image-overlay">
-              <h2 class="text-2xl md:text-3xl font-bold mb-6 heading-secondary">加入赢在美股，开启赢家人生！</h2>
+              <h2 class="text-2xl md:text-3xl font-bold mb-6 heading-secondary text-center ">教育精英化 · 武器AI化!</h2>
               <p class="text-gray-300 mb-10 leading-relaxed paragraph-text">
                 填写报名表，即可快速解锁专业投资AI工具，助力您把握投资机会！
               </p>
               <div class="space-y-6">
                 <div class="flex items-start">
                   <div class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center mr-4 mt-1">
-                    <img alt="超级云脑" src="https://hc.homilychart.com/hc/250121/img/chaojiyunnao.png">
+                    <img alt="超级云脑" src="https://d31zlh4on95l9h.cloudfront.net/files/5iujc601000dg5bad6avznn400jwiqwu.png">
                   </div>
                   <div>
-                    <h3 class="font-semibold mb-1 heading-tertiary">超级云脑</h3>
-                    <p class="text-gray-400 text-sm paragraph-text">您的股票体检专家！</p>
+                    <h3 class="font-semibold mb-1 heading-tertiary">DeepChart</h3>
+                    <p class="text-gray-400 text-sm paragraph-text">全球最懂机构行为的AI</p>
                   </div>
                 </div>
 
                 <div class="flex items-start">
                   <div class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center mr-4 mt-1">
-                    <img alt="AI预测大模型" src="https://hc.homilychart.com/hc/250121/img/AIyuce.png">
+                    <img alt="AI预测大模型" src="https://d31zlh4on95l9h.cloudfront.net/files/5iujc601000dg5bapwystqy500k1h6xw.png">
                   </div>
                   <div>
-                    <h3 class="font-semibold mb-1 heading-tertiary">AI预测大模型</h3>
-                    <p class="text-gray-400 text-sm paragraph-text">时间空间价格AI精准预测！</p>
+                    <h3 class="font-semibold mb-1 heading-tertiary">夺宝奇兵</h3>
+                    <p class="text-gray-400 text-sm paragraph-text">机构界的黑科技</p>
                   </div>
                 </div>
 
                 <div class="flex items-start">
                   <div class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center mr-4 mt-1">
-                    <img alt="夺宝利剑" src="https://hc.homilychart.com/hc/250121/img/duobaolijian.png">
+                    <img alt="夺宝利剑" src="https://d31zlh4on95l9h.cloudfront.net/files/5iujc601000dg5bb0rllyv0600wgiveo.png">
                   </div>
                   <div>
-                    <h3 class="font-semibold mb-1 heading-tertiary">夺宝利剑</h3>
-                    <p class="text-gray-400 text-sm paragraph-text">最聪明的AI智能均线+三维波动量</p>
+                    <h3 class="font-semibold mb-1 heading-tertiary">赢在美股·体系化实战课程</h3>
+                    <p class="text-gray-400 text-sm paragraph-text">[学 · 练 · 战 · 享 ]用体系化思维，掌握最前沿美股分析方法与实战策略</p>
                   </div>
                 </div>
               </div>
+              
+              <!-- 在左侧区域底部添加标语 -->
+              <div class="mt-10 border-t border-white/20 pt-6">
+                <h3 class="text-3xl font-bold text-center tracking-wider">
+                  加入赢在美股，开启赢家人生!
+                </h3>
+              </div>
             </div>
 
             <!-- 右侧表单区域 - 保持不变 -->
@@ -436,16 +477,16 @@
               <form id="registrationForm" class="space-y-6">
                 <input type="hidden" name="zbtype" id="zbType" value="6">
                 <div>
-                  <label for="userNameInfo" class="block text-sm font-medium text-gray-700 mb-1 form-label">姓名</label>
+                  <label for="userNameInfo" class="block text-sm font-medium text-gray-700 mb-1 form-label">姓名 <span class="text-red-500">*</span></label>
                   <input type="text" id="userNameInfo" name="userNameInfo"
-                    class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary transition-all form-input"
+                    class="w-full px-4 py-3 rounded-lg border-2 border-gray-300 focus:border-orange-500 focus:ring-0 transition-all form-input"
                     placeholder="请输入您的姓名" required>
                 </div>
 
                 <div>
-                  <label for="countryInfo" class="block text-sm font-medium text-gray-700 mb-1 form-label">国家/地区代码</label>
+                  <label for="countryInfo" class="block text-sm font-medium text-gray-700 mb-1 form-label">国家/地区代码 <span class="text-red-500">*</span></label>
                   <select id="countryInfo" name="countryInfo"
-                    class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary transition-all form-input"
+                    class="w-full px-4 py-3 rounded-lg border-2 border-gray-300 focus:border-orange-500 focus:ring-0 transition-all form-input"
                     required>
                     <option value="+65">+65 新加坡</option>
                     <option value="+60">+60 马来西亚</option>
@@ -483,10 +524,10 @@
                   </select>
                 </div>
                 <div>
-                  <label for="userMobile" class="block text-sm font-medium text-gray-700 mb-1 form-label">电话号码</label>
+                  <label for="userMobile" class="block text-sm font-medium text-gray-700 mb-1 form-label">电话号码 <span class="text-red-500">*</span></label>
                   <input type="tel" name="userMobile" id="userMobile" placeholder="纯手机号 ( 不含国家编号 )"
                     onkeyup="value=value.replace(/[^\d]/g,'').replace(/^0/g,'')"
-                    class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary transition-all form-input"
+                    class="w-full px-4 py-3 rounded-lg border-2 border-gray-300 focus:border-orange-500 focus:ring-0 transition-all form-input"
                     autocomplete="off" required>
                 </div>
 
@@ -494,31 +535,99 @@
                   <label for="userWechat" class="block text-sm font-medium text-gray-700 mb-1 form-label">微信ID</label>
                   <input type="text" name="userWechat" id="userWechat" placeholder="微信ID ( 如没有WhatsApp )"
                     autocomplete="off"
-                    class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary transition-all form-input">
+                    class="w-full px-4 py-3 rounded-lg border-2 border-gray-300 focus:border-orange-500 focus:ring-0 transition-all form-input">
                 </div>
 
                 <div>
-                  <label for="userEmail" class="block text-sm font-medium text-gray-700 mb-1 form-label">电子邮箱</label>
+                  <label for="userEmail" class="block text-sm font-medium text-gray-700 mb-1 form-label">电子邮箱 <span class="text-red-500">*</span></label>
                   <input type="email" placeholder="请输入您的邮箱" name="userEmail" id="userEmail" autocomplete="off"
-                    class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary transition-all form-input"
+                    class="w-full px-4 py-3 rounded-lg border-2 border-gray-300 focus:border-orange-500 focus:ring-0 transition-all form-input"
                     required>
                 </div>
 
+                <!-- 多选区域 -->
+                <div>
+                  <label class="block text-sm font-medium text-gray-700 mb-2">请选择您希望优先获取的权益 (可多选) <span class="text-red-500">*</span></label>
+                  <div class="space-y-3">
+                    <label class="flex items-center space-x-3 cursor-pointer group">
+                      <input type="checkbox" name="benefits[]" value="DeepChart" 
+                        class="w-5 h-5 border-2 border-gray-300 rounded focus:border-orange-500 focus:ring-0 custom-orange-checkbox">
+                      <span class="text-sm text-gray-600 group-hover:text-gray-800">获取DeepChart体验权限</span>
+                    </label>
+                    <label class="flex items-center space-x-3 cursor-pointer group">
+                      <input type="checkbox" name="benefits[]" value="夺宝奇兵" 
+                        class="w-5 h-5 border-2 border-gray-300 rounded focus:border-orange-500 focus:ring-0 custom-orange-checkbox">
+                      <span class="text-sm text-gray-600 group-hover:text-gray-800">获取"夺宝奇兵"体验权限</span>
+                    </label>
+                    <label class="flex items-center space-x-3 cursor-pointer group">
+                      <input type="checkbox" name="benefits[]" value="独家课程" 
+                        class="w-5 h-5 border-2 border-gray-300 rounded focus:border-orange-500 focus:ring-0 custom-orange-checkbox">
+                      <span class="text-sm text-gray-600 group-hover:text-gray-800">参加"赢在美股"独家课程 - 学习前沿分析方法与操作策略</span>
+                    </label>
+                  </div>
+                </div>
+
+                <!-- 同意接收咨询 -->
                 <div class="flex items-start">
-                  <input type="checkbox" id="agreement" name="agreement" class="mt-1 mr-2" required>
+                  <input type="checkbox" id="agreement" name="agreement" 
+                    class="mt-1 mr-2 w-5 h-5 border-2 border-gray-300 rounded focus:border-orange-500 focus:ring-0 custom-orange-checkbox" required>
                   <label for="agreement" class="text-sm text-gray-600 form-label">
-                    我同意接收相关产品和服务的资讯
+                    我同意接收相关产品和服务的咨询
                   </label>
                 </div>
 
+                <!-- 提交按钮 -->
                 <button type="submit" id="submitBtn"
-                  class="w-full py-3 px-6 rounded-lg gradient-background text-white font-medium hover:shadow-lg hover:shadow-primary/20 transition-all transform hover:-translate-y-0.5 form-button">
+                  class="w-full py-3 px-6 rounded-lg text-white font-medium hover:shadow-lg transition-all transform hover:-translate-y-0.5 custom-orange-button">
                   提交注册
                 </button>
               </form>
             </div>
           </div>
         </div>
+
+        <!-- === 声明卡片 === -->
+        <!-- 在大屏幕上显示，定位在注册表单的右侧外部，紧贴下沿 -->
+        <!-- 小屏幕隐藏 -->
+        <div class="hidden lg:block absolute left-full bottom-0 ml-4 w-64">
+          <div class="bg-white rounded-xl shadow-lg p-4 border border-gray-200">
+            <div class="mb-4 border-b border-gray-100 pb-3">
+              <h4 class="font-bold text-gray-900 mb-2 text-sm">注册说明</h4>
+              <div class="space-y-2 text-xs">
+                <div class="flex items-start">
+                  <div class="w-5 h-5 rounded-full bg-orange-50 flex items-center justify-center mr-2 flex-shrink-0 text-orange-500 text-xs">
+                    <i class="fa fa-user"></i>
+                  </div>
+                  <p class="text-gray-600">请填写方便称呼您的姓名信息。</p>
+                </div>
+                <div class="flex items-start">
+                  <div class="w-5 h-5 rounded-full bg-orange-50 flex items-center justify-center mr-2 flex-shrink-0 text-orange-500 text-xs">
+                    <i class="fa fa-whatsapp"></i>
+                  </div>
+                  <p class="text-gray-600">手机号码最好支持WhatsApp联系。</p>
+                </div>
+                <div class="flex items-start">
+                  <div class="w-5 h-5 rounded-full bg-orange-50 flex items-center justify-center mr-2 flex-shrink-0 text-orange-500 text-xs">
+                    <i class="fa fa-comments"></i>
+                  </div>
+                  <p class="text-gray-600">微信的联系方式我们也支持。</p>
+                </div>
+                <div class="flex items-start">
+                  <div class="w-5 h-5 rounded-full bg-orange-50 flex items-center justify-center mr-2 flex-shrink-0 text-orange-500 text-xs">
+                    <i class="fa fa-envelope"></i>
+                  </div>
+                  <p class="text-gray-600">邮箱作为联系您的备用联系方式。</p>
+                </div>
+              </div>
+            </div>
+            <div>
+              <h4 class="font-bold text-gray-900 mb-1 text-sm">郑重声明</h4>
+              <p class="text-xs text-gray-500 leading-relaxed">
+                我们将严格保护您的个人信息安全，绝对不会向第三方泄露。
+              </p>
+            </div>
+          </div>
+        </div>
       </div>
     </section>
  </main>
@@ -528,9 +637,11 @@
         <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
           <div>
             <div class="flex items-center space-x-2 mb-6">
-              <div class="w-10 h-10 rounded-lg gradient-background flex items-center justify-center">
-                <img alt="赢在美股" src="https://d31zlh4on95l9h.cloudfront.net/images/497d8b38ab9f738e9720d5d7bddf3beb.png"
-                  style="width: 40px;height: 40px;">
+              <div class="w-10 h-10 rounded-lg  flex items-center justify-center">
+               <img
+                src="https://d31zlh4on95l9h.cloudfront.net/files/5iujc601000dg5udhzj898b800yp02ol.png"
+                alt="Logo"
+              />
               </div>
               <span class="text-xl font-bold">赢在美股</span>
             </div>
@@ -1319,6 +1430,54 @@
     .dropdown-item:hover {
       color: #FFA300;
     }
+      /* 自定义橙色渐变背景 */
+    .custom-orange-button {
+      background: linear-gradient(90deg, #FFAC19 0%, #FFA300 100%);
+      border: none;
+    }
+    
+    .custom-orange-button:hover {
+      background: linear-gradient(90deg, #FFB433 0%, #FFB020 100%);
+      box-shadow: 0 4px 12px rgba(255, 172, 25, 0.3);
+    }
+    
+    /* 自定义复选框样式 - 使用橙色 */
+    .custom-orange-checkbox {
+      appearance: none;
+      -webkit-appearance: none;
+      cursor: pointer;
+      position: relative;
+      transition: all 0.2s;
+    }
+    
+    .custom-orange-checkbox:checked {
+      background-color: #FFA300;
+      border-color: #FFA300 !important;
+    }
+    
+    .custom-orange-checkbox:checked::after {
+      content: '';
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%) rotate(45deg);
+      width: 5px;
+      height: 10px;
+      border: solid white;
+      border-width: 0 2px 2px 0;
+    }
+    
+    /* 输入框和下拉框样式 */
+    .form-input {
+      border-width: 2px;
+    }
+    
+    /* 移除所有蓝色边框和聚焦阴影 */
+    .form-input:focus {
+      outline: none;
+      border-color: #FFA300 !important;
+      box-shadow: 0 0 0 3px rgba(255, 172, 25, 0.1);
+    }
 
   </style>
 </body>