* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Microsoft YaHei", sans-serif;
}
.logo {
    display: flex;
    align-items: center;
    font-size: clamp(20px, 4vw, 27px);
    font-weight: 550;
    color: #414449;
    gap: 20px;
    opacity: 0.85
}
/* 用文字画一个L型LOGO */
.logo-icon {
    font-size: clamp(36px, 7vw, 50px);
    line-height: 1;
    font-weight: 700;
}
header {
    min-height: 50px; /* 导航栏高度，和截图匹配 */
    display: flex;
    align-items: center;
    justify-content: space-between; /* 左右分开：LOGO在左，导航在右 */
    padding: 1rem 3%; /* 左右留白 */
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.05);
    flex-wrap: wrap; /* 新增：空间不够自动换行 */
    gap: 1rem;
}
nav {
    display: flex;
    gap: clamp(15px, 6vw, 100px);
}

nav a {
    color: #414449;
    text-decoration: none;
    font-weight: 550;
    transition: all 0.15s ease;
    font-size: clamp(13px, 4vw, 17px);
    white-space: nowrap;
}

nav a:hover {
    text-shadow: 0 1px 2px rgba(65, 65, 65, 0.08);
    /* 往上负1px，就是只上浮1px */
    transform: translateY(-1px);
}   
body {
    background-color: #ffffff;
    color: #414449;
    line-height: 1.7;
    min-height: 100vh;
    min-width: 320px;
    display: flex;
    flex-direction: column;
}

/* 按钮样式 */
.btn {
    padding: clamp(3px,4vw,11px) clamp(20px,5vw,30px);
    font-size: clamp(13px,4vw,18px);
    font-weight: 550;
    background: #300ac9;
    color: #fff;
    text-decoration: none;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(48, 10, 201, 0.35);
    /* 过渡动画，hover 顺滑 */
    transition: all 0.2s ease;
    white-space: nowrap;
    border: none; /* 彻底去掉黑色边框 */
    border-radius: 26px;
}
.btn:hover {
    background: #200b73;
    box-shadow: 0 6px 14px rgba(48, 10, 201, 0.45);
    transform: translateY(-1px); /* 轻微上浮，更有质感 */
}
/* 点击按压轻微下沉 */
.btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(48, 10, 201, 0.2);
}
.btn-item {
    display: flex;
    flex-direction: column;
    align-items: center; /* 按钮+文字整体居中 */
}

/* 纯输入框搜索表单，无按钮 */
.search-form {
    display: flex;
    gap: 10px;
    /* 弹性占比：最小260px，最大380px，窗口变化自动伸缩 */
    flex: 0 1 clamp(260px, 28vw, 380px);
}
.search-form input {
    flex: 1;
    padding: 11px 16px;
    border: 1px solid #b8b8b8; /* 加深边框，比#ddd更清晰 */
    border-radius: 22px; /* 超大圆角，圆润好看 */
    outline: none;
    font-size: 14px;
    background: #fff;
    transition: all 0.2s ease; /* 过渡动画，交互顺滑 */
}
.search-form input[name="keyword"]::placeholder {
    color: #999;
}
.search-form input:hover {
    border-color: #999;
}
.search-form input:focus {
    border-color: #300ac9;
    box-shadow: 0 0 0 2px rgba(48, 10, 201, 0.15); /* 柔和外发光 */
}
@media (max-width: 950px) {
    header {
        flex-direction: column;
        align-items: stretch;
    }
    .search-form {
        width: 100%;
        flex: unset;
    }
}