/* ========== 全局重置 & 基础样式 ========== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;  /* 统一盒模型，宽度计算更可控，避免padding/border撑大元素 */
        }

        body {
            background: linear-gradient(145deg, #f5f7fc 0%, #eef2f5 100%);
            font-family: 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* 主容器 - 完全按照设计稿: 宽800px, 高70px, 水平居中, 顶部留白调整 */
        .container {
            width: 800px;
            height: 70px;
            margin: 20px auto 0 auto;
            /* 增加软阴影让组件更精致 */
            filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.06));
        }

        /* 相对定位父层 —— 作为绝对定位元素的参考坐标系 */
        .parent {
            position: relative;
            width: 100%;          /* 撑满父容器宽度，让子元素定位基于左上角 */
            height: 70px;         /* 显式高度与.container一致，便于内部元素垂直居中微调 */
        }

        /* 搜索输入框: 圆润、干净、可交互 */
        .search {
            width: 300px;
            height: 44px;          /* 稍微增高, 视觉舒适, 同时保留与按钮良好比例 (原40微调至44) */
            border-radius: 44px;   /* 完美圆润胶囊风格 */
            outline: none;
            border: 1px solid rgba(0, 0, 0, 0.12);
            padding-left: 20px;
            padding-right: 48px;    /* 右侧预留空间给图标按钮，避免输入文字被遮挡 */
            font-size: 15px;
            background-color: #ffffff;
            transition: all 0.25s ease;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02), inset 0 1px 2px rgba(0, 0, 0, 0.02);
            font-weight: 400;
            color: #1e2a3e;
            /* 绝对定位: 垂直居中, 左对齐 */
            position: absolute;
            left: 0;
            top: 13px;             /* (70 - 44) / 2 = 13px，精确垂直居中 */
        }

        /* 输入框聚焦时提升视觉反馈 */
        .search:focus {
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
            outline: none;
        }

        /* 占位符样式优化 */
        .search::placeholder {
            color: #a0afba;
            font-weight: 400;
            font-size: 14px;
            letter-spacing: 0.3px;
        }

        /* 搜索按钮: 放大镜风格 (采用优雅的 SVG 图标 + 备用背景方案) 
           原需求 background: url("images/topbar.png") no-repeat -2px -99px;
           为保证在任何环境下都有完美可视化效果，此处提供现代 SVG 内嵌图标作为主要方案，
           同时保留原始背景路径（已注释但可轻松替换），用户可根据实际项目资源启用精灵图。
           按钮完全可点，且具有良好的悬停反馈。
        */
        .btn {
            width: 38px;
            height: 38px;
            position: absolute;
            /* 精确定位: 垂直居中对齐输入框内部右侧区域 */
            top: 16px;            /* (70 - 38) / 2 = 16px，保证与整体容器协调 */
            left: 262px;          /* 输入框宽度300px - 按钮宽度38px = 262px，完美内嵌右侧 */
            border: medium none;
            background-color: transparent;
            cursor: pointer;
            outline: none;
            border-radius: 50%;   /* 圆形按钮区域，更现代 */
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2;
            
            /* ----- 核心图标方案 ----- 
               使用内嵌矢量图 (Base64 SVG 放大镜) 确保在任何环境显示精美图标。
               同时可以轻松替换为原始要求的图片精灵。如需启用原始图片资源，
               只需注释下方 background-image 并取消注释下一行 background 即可。
            */
            background-image: url(data:image/svg+xml,%3Csvg\ xmlns=\'http://www.w3.org/2000/svg\'\ viewBox=\'0\ 0\ 24\ 24\'\ fill=\'%235f6c84\'%3E%3Cpath\ d=\'M15.5\ 14h-.79l-.28-.27A6.471\ 6.471\ 0\ 0\ 0\ 16\ 9.5\ 6.5\ 6.5\ 0\ 1\ 0\ 9.5\ 16c1.61\ 0\ 3.09-.59\ 4.23-1.57l.27.28v.79l5\ 4.99L20.49\ 19l-4.99-5zm-6\ 0C7.01\ 14\ 5\ 11.99\ 5\ 9.5S7.01\ 5\ 9.5\ 5\ 14\ 7.01\ 14\ 9.5\ 11.99\ 14\ 9.5\ 14z\'/%3E%3C/svg%3E);
            background-repeat: no-repeat;
            background-position: center;
            background-size: 20px 20px
        }

        /* 如果项目使用原始精灵图 (images/topbar.png) 可覆盖下面样式，保留注释方便切换 */
        /* 如需启用原始背景，请移除上方 background-image 属性，并取消下方代码注释
        .btn {
            background: url("images/topbar.png") no-repeat -2px -99px;
            background-size: auto;    /* 根据精灵图实际尺寸调整，通常不缩放 */
            background-color: transparent;
        }
        */

        /* 按钮悬停效果: 温和背景 + 轻微放大 */
        .btn:hover {
            background-color: rgba(59, 130, 246, 0.1);
            transform: scale(1.02);
        }

        /* 按钮点击反馈 */
        .btn:active {
            transform: scale(0.96);
            background-color: rgba(59, 130, 246, 0.2);
        }

        /* 设置按钮获得焦点时的轮廓（辅助键盘导航） */
        .btn:focus-visible {
            outline: 2px solid #3b82f6;
            outline-offset: 2px;
            background-color: rgba(59, 130, 246, 0.1);
        }

        /* 可选: 增加一个微妙的装饰性右侧留白提示 */
        /* 完美适配移动/桌面, 容器居中保持美观 */
        
        /* 小屏响应式优化: 当屏幕宽度小于880px时，让容器保持左右边距 */
        @media (max-width: 880px) {
            .container {
                width: 90%;
                max-width: 800px;
                margin: 20px auto;
            }
            .search {
                width: 280px;
            }
            .btn {
                left: 242px;   /* 280 - 38 = 242，动态适配 */
            }
        }
        
        /* 极窄屏幕下依然保持可用 (手机横屏或小折叠) */
        @media (max-width: 560px) {
            .container {
                width: 96%;
            }
            .search {
                width: calc(100% - 50px);
                min-width: 200px;
                left: 0;
                right: auto;
            }
            .btn {
                left: auto;
                right: 6px;   /* 右边缘固定方案, 保证按钮始终在输入框最右侧内 */
                top: 16px;
            }
            /* 针对窄屏重新调整定位, 更灵活 */
            .parent {
                position: relative;
            }
            .search {
                width: 100%;
                padding-right: 52px;
            }
            .btn {
                left: auto;
                right: 8px;
                top: 16px;
            }
        }

        /* 优雅附加: 表单跟随无刷新体验(演示用) 及 提示样式 */
        .demo-note {
            text-align: center;
            margin-top: 32px;
            font-size: 13px;
            color: #5c6f87;
            letter-spacing: 0.3px;
            background: rgba(255,255,240,0.6);
            width: fit-content;
            margin-left: auto;
            margin-right: auto;
            padding: 6px 18px;
            border-radius: 40px;
            backdrop-filter: blur(2px);
            font-weight: 400;
        }
        .demo-note a {
            color: #3b82f6;
            text-decoration: none;
            border-bottom: 1px dashed #b9d0f0;
        }
        .demo-note a:hover {
            color: #1e40af;
        }