/* =========================
   全局初始化
========================= */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,body{
    width:100%;
    height:100%;
}

/* =========================
   页面主体
========================= */
body{
    min-height:100dvh;
    overflow-x:hidden;
    overflow-y:auto;
    font-family:"Microsoft YaHei",Arial,sans-serif;
    color:#1a1a1a;
    background:#f5f7fb;
}

/* =========================
   背景层
========================= */
.bg{
    position:fixed;
    inset:0;
    background:#f5f7fb;
    z-index:-1;
}

/* =========================
   主内容居中布局
========================= */
.main{
    min-height:100dvh;
    height:auto;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    padding:40px 0;
}

/* =========================
   Logo 区域
========================= */
.logo-area{
    text-align:center;
    margin-bottom:35px;
}

.logo-area img{
    width:90px;
    height:90px;
    padding:6px;
    background:#f5f7fb;
    border-radius:18px;
    object-fit:contain;
}

.logo-area h1{
    font-size:42px;
    margin-top:20px;
    color:#111;
}

.logo-area p{
    margin-top:10px;
    opacity:.6;
}

/* =========================
   搜索框整体
========================= */
.search-box{
    width:650px;
    max-width:90%;
    height:65px;
    display:flex;
    position:relative;
    overflow:hidden;
    border-radius:35px;
    background:#ffffff;
    box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

/* 输入框 */
.search-box input{
    flex:1;
    height:55px;
    padding:0 30px;
    font-size:18px;
    border:0;
    outline:0;
    background:transparent;
    color:#333;
}

/* 输入框提示文字 */
.search-box input::placeholder{
    color:#999;
}

/* 搜索按钮 */
.search-box button{
    flex-shrink:0;
    width:130px;
    height:65px;
    border:0;
    cursor:pointer;
    font-size:18px;
    color:white;
    background:#7c3cff;
    transition:0.2s;
}

.search-box button:hover{
    background:#6a2fff;
}

/* =========================
   搜索联想下拉框
========================= */
#suggest{
    position:absolute;
    top:75px;
    left:0;
    right:0;
    background:#fff;
    border-radius:15px;
    overflow:hidden;
    z-index:10;
    box-shadow:0 10px 25px rgba(0,0,0,0.12);
}

/* 联想项 */
.s-item{
    padding:12px;
    cursor:pointer;
    color:#333;
}

.s-item:hover{
    background:#f0f0f0;
}

/* =========================
   热门搜索区域（已优化）
========================= */
.hot{
    margin-top:40px;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:12px;
}

/* 标题 */
.hot-title{
    width:100%;
    text-align:center;
    font-weight:bold;
    opacity:.7;
    cursor:default; /* 标题不需要手型 */
}

/* 所有热门按钮 */
.hot span{
    background:#fff;
    padding:10px 18px;
    border-radius:30px;
    cursor:pointer;   /* ⭐关键就在这里 */
    user-select:none;
    box-shadow:0 6px 18px rgba(0,0,0,0.06);
    transition:0.2s;
}

/* hover效果 */
.hot span:hover{
    transform:scale(1.05);
    background:#f0c9e1;
}

/* =========================
   手机适配
========================= */
@media(max-width:600px){

    .main{
        justify-content:flex-start;
        padding-top:55px;
    }

    .logo-area{
        margin-bottom:25px;
    }

    .logo-area img{
        width:75px;
        height:75px;
        border-radius:20px;
    }

    .logo-area h1{
        font-size:28px;
        margin-top:15px;
    }

    .logo-area p{
        font-size:14px;
    }

    .search-box{
        width:90%;
        height:52px;
        border-radius:26px;
    }

    .search-box input{
        height:52px;
        padding:0 18px;
        font-size:15px;
    }

    .search-box button{
        width:80px;
        height:52px;
        font-size:15px;
    }

    #suggest{
        top:60px;
    }

    .hot{
        margin-top:30px;
        gap:10px;
    }

    .hot span{
        padding:8px 14px;
        font-size:14px;
    }
}

/* =========================
   更小屏幕优化
========================= */
@media(max-width:380px){

    .main{
        padding-top:35px;
    }

    .logo-area img{
        width:65px;
        height:65px;
    }

    .logo-area h1{
        font-size:24px;
    }

    .search-box{
        width:94%;
    }

    .search-box button{
        width:70px;
    }
}