/* 基础样式复刻 */
 body,
 html { margin: 0; padding: 0; height: 100%; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; overflow-x: auto; min-width: 1200px;}

 .login-container { display: flex; height: 100vh; width: 100%; overflow: hidden;}
 /* 左侧背景图区域 */
 .login-left { flex: 7; /* 约占 70% 宽度 */ background: url('../images/login-bg.webp') no-repeat center center; background-size: cover; position: relative;}
 /* 右侧登录表单区域 */
 .login-right { flex: 3; /* 约占 30% 宽度 */ background: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 40px; min-width: 380px;}
 /* 头部 Logo 及标题 */
 .login-header { text-align: center; margin-bottom: 70px;}
 .login-header .logo_img { margin-bottom: 20px;}

 .login-header .logo_img img { width: 100px;}
 .login-header .logo_img {}
 .company-name-cn { font-size: 20px; font-weight: bold; color: #333; letter-spacing: 1px;}
 .company-name-en { font-size: 14px; color: #666; margin-top: 5px; text-transform: uppercase;}
 /* 表单样式定制 */
 .layui-form { width: 100%; max-width: 73%;}
 .layui-form-item { position: relative; margin-bottom: 20px;}
 /* 1:1 还原圆角和图标 */
 .layui-input { height: 60px; border-radius: 60px !important; padding-left: 60px !important; background-color: #f8f8f8; border: 1px solid #d6d6d6; font-size: 16px;}
 .input-icon { position: absolute; left: 30px; top: 50%; transform: translateY(-50%); color: #226cc5; font-size: 18px;}
 /* 登录按钮 */
 .btn-login { width: 100%; height: 60px; background-color: #1664be !important; /* 匹配图中的蓝色 */ border-radius: 100px; font-size: 16px; margin-top: 36px;}
 /* 页脚版权 */
 .login-footer { position: absolute; bottom: 20px; color: #7e7e7e; text-align: center;}


 /* 搜索页面 */
 .searchPageMain {width: 100%;min-height: 100vh;background: url(../images/searchPage-bg.webp) no-repeat center;background-size: cover;}
 /* 顶部导航 */
 .header {position: sticky; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 40px; background: transparent;}
 .header.logo-box { display: flex; align-items: center;}
 .header .logo-img {}
 .slogan { margin-left: 20px; border-left: 1px solid #ccc; padding-left: 20px;}
 .slogan h2 { font-size: 24px; color: #333;}
 .slogan p { font-size: 16px; color: #999;}
 .btn-exit {flex-shrink: 0; background: #2a69c4; color: #fff; border-radius: 6.25rem; font-size: 16px; padding: 8px 20px; cursor: pointer; display: flex; align-items: center;}
 .btn-exit i {font-size: 20px;}

 /* 搜索区域容器 */
 .main-container { display: flex; flex-direction: column; align-items: center; transition: all 0.5s ease; margin-top: 15vh; /* 初始位置居中偏上 */}
 /* 搜索结果显示时的状态 */
 .main-container.has-results { margin-top: 5vh;}
 .search-group { display: flex; align-items: center; width: 50%; height: 70px; background: #f6fafd; border-radius: 5px; padding: 10px 20px; /* overflow: hidden; */ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);}
 .search-type-custom { width: 180px; border-right: 1px solid #eee; display: flex; align-items: center; justify-content: space-between; padding-right: 20px; cursor: pointer; position: relative;}
 .search-type-custom  i {color: #313f50; font-size: 20px;}
 .current-type-text .p1 {font-size: 14px; color: #314051;}
 .current-type-text .p2 {font-size: 18px; color: #314051;}
 .layui-dropdown {width: 180px; margin: 10px 0;}
 .search-input-wrap { flex: 1; display: flex; align-items: center; margin: 0 15px; position: relative;}
 .search-input-wrap .tips {position: absolute; top: 50%; left: 0; transform: translateY(-50%);  pointer-events: none;transition: opacity 0.2s;}
 .search-input-wrap .tips .p1 {color: #586d90; font-size: 16px; opacity: .5; line-height: 1.25;}
 .search-input-wrap .tips .p2 {color: #586d90; font-size: 14px; opacity: .5;}
 .search-input-wrap input { border: none; width: 100%; outline: none; font-size: 16px; height: 100%; background: none; color: #333;}
 .btn-search { width: 50px; height: 50px; border-radius: 10px; background: #2a69c4; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px;}
 .btn-search i {opacity: .5;}
 .btn-search:hover i {opacity: 1;}

 /* 结果表格 */
 .search-results { width: 70%; margin-top: 40px; display: none; animation: fadeInUp 0.5s forwards;}
 .search-results .tableBox {overflow-x: auto;}
 .search-results .tableBox table {min-width: 1024px;}
 .result-info { color: #999; margin-bottom: 15px; font-size: 14px;}
 .result-info span { color: #2a69c4; font-weight: bold; margin: 0 5px;}
 .layui-table thead tr {background-color: #d9e4f5 !important;}
 .layui-table th { padding: 20px 10px; color: rgba(49, 64, 81,.5); font-weight: bold; border: none; font-size: 14px; text-align: center; }
 .layui-table th small {font-size: 18px; color: #333; ;line-height: 1.2;}
 .layui-table td { text-align: center; vertical-align: middle; padding: 15px 10px;}
 .prod-img { width: 80px; height: 50px; object-fit: cover; border-radius: 4px; cursor: pointer;-webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; }
 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(20px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 /* 无结果状态样式 */
 #no-data-area { display: none; text-align: center; margin-top: 10vh; animation: fadeInUp 0.5s forwards;}
 #no-data-area i { font-size: 80px; color: #cbd5e0;}
 #no-data-area p { margin-top: 15px; color: #999; font-size: 16px;}

 @media screen and (max-width: 1600px) {
    .slogan h2 { font-size: 22px;}
    .slogan p { font-size: 14px;}
 }

 
 @media screen and (max-width: 1280px) {
    .slogan h2 { font-size: 18px;}
    .slogan p { font-size: 12px;}

    .search-group {width: 60%;}
    .search-results {width: 90%;}
    .layui-table th small {font-size: 16px;}


 }