/* ============================================
   搜索页面样式
   ============================================ */

/* 搜索页面背景 */
.search-page {
    background-color: #000212;
    min-height: 100vh;
}

/* 搜索区域 */
.search-hero {
    padding-top: min(120px, calc(120 / 1414 * 100vw));
    padding-bottom: min(60px, calc(60 / 1414 * 100vw));
}

.search-container {
    max-width: min(900px, calc(900 / 1414 * 100vw));
    margin: 0 auto;
    padding: 0 min(20px, calc(20 / 1414 * 100vw));
    text-align: center;
}

.search-title {
    font-family: "PingFang SC Semibold";
    font-size: min(36px, calc(36 / 1414 * 100vw));
    color: #FFFFFF;
    margin-bottom: min(30px, calc(30 / 1414 * 100vw));
    font-weight: 600;
}

.search-form {
    width: 100%;
}

.search-input-wrapper {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: min(1px, calc(1 / 1414 * 100vw)) solid rgba(255, 255, 255, 0.2);
    border-radius: min(50px, calc(50 / 1414 * 100vw));
    padding: min(5px, calc(5 / 1414 * 100vw)) min(5px, calc(5 / 1414 * 100vw)) min(5px, calc(5 / 1414 * 100vw)) min(25px, calc(25 / 1414 * 100vw));
    transition: all 0.3s ease;
}

.search-input-wrapper:focus-within {
    border-color: #0078FF;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 min(20px, calc(20 / 1414 * 100vw)) rgba(0, 120, 255, 0.2);
}

.search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: min(16px, calc(16 / 1414 * 100vw));
    color: #FFFFFF;
    font-family: "PingFang SC Regular";
    padding: min(15px, calc(15 / 1414 * 100vw)) 0;
}

.search-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.search-submit {
    width: min(50px, calc(50 / 1414 * 100vw));
    height: min(50px, calc(50 / 1414 * 100vw));
    background: linear-gradient(135deg, #0078FF 0%, #0A82FF 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.search-submit:hover {
    transform: scale(1.05);
    box-shadow: 0 min(5px, calc(5 / 1414 * 100vw)) min(15px, calc(15 / 1414 * 100vw)) rgba(0, 120, 255, 0.4);
}

.search-submit img {
    width: min(22px, calc(22 / 1414 * 100vw));
    height: min(22px, calc(22 / 1414 * 100vw));
    filter: brightness(0) invert(1);
}

/* 搜索结果区域 */
.search-results {
    padding-bottom: min(100px, calc(100 / 1414 * 100vw));
}

.results-container {
    max-width: min(1000px, calc(1000 / 1414 * 100vw));
    margin: 0 auto;
    padding: 0 min(20px, calc(20 / 1414 * 100vw));
}

/* 结果头部 */
.results-header {
    margin-bottom: min(30px, calc(30 / 1414 * 100vw));
    padding-bottom: min(20px, calc(20 / 1414 * 100vw));
    border-bottom: min(1px, calc(1 / 1414 * 100vw)) solid rgba(255, 255, 255, 0.1);
}

.results-count {
    font-size: min(14px, calc(14 / 1414 * 100vw));
    color: rgba(255, 255, 255, 0.6);
    font-family: "PingFang SC Regular";
}

.results-count strong {
    color: #0078FF;
    font-weight: 600;
}

.keyword-tag {
    color: #FFFFFF;
    background: rgba(0, 120, 255, 0.2);
    padding: min(2px, calc(2 / 1414 * 100vw)) min(8px, calc(8 / 1414 * 100vw));
    border-radius: min(4px, calc(4 / 1414 * 100vw));
    font-size: min(13px, calc(13 / 1414 * 100vw));
}

/* 结果列表 */
.results-list {
    display: flex;
    flex-direction: column;
    gap: min(20px, calc(20 / 1414 * 100vw));
}

/* 单条结果 */
.result-item {
    display: flex;
    gap: min(25px, calc(25 / 1414 * 100vw));
    background: rgba(255, 255, 255, 0.03);
    border: min(1px, calc(1 / 1414 * 100vw)) solid rgba(255, 255, 255, 0.08);
    border-radius: min(16px, calc(16 / 1414 * 100vw));
    padding: min(20px, calc(20 / 1414 * 100vw));
    transition: all 0.3s ease;
    text-decoration: none;
}

.result-item:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(0, 120, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 min(10px, calc(10 / 1414 * 100vw)) min(30px, calc(30 / 1414 * 100vw)) rgba(0, 0, 0, 0.2);
}

/* 结果图片 */
.result-image {
    width: min(200px, calc(200 / 1414 * 100vw));
    height: min(130px, calc(130 / 1414 * 100vw));
    border-radius: min(12px, calc(12 / 1414 * 100vw));
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.05);
}

.result-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.result-item:hover .result-image img {
    transform: scale(1.05);
}

.result-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(0, 120, 255, 0.1) 0%, rgba(10, 130, 255, 0.05) 100%);
}

.result-image-placeholder img {
    width: min(60px, calc(60 / 1414 * 100vw));
    height: min(60px, calc(60 / 1414 * 100vw));
    opacity: 0.3;
}

/* 结果内容 */
.result-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.result-meta {
    display: flex;
    align-items: center;
    gap: min(15px, calc(15 / 1414 * 100vw));
    margin-bottom: min(10px, calc(10 / 1414 * 100vw));
}

.result-type {
    font-size: min(12px, calc(12 / 1414 * 100vw));
    color: #0078FF;
    background: rgba(0, 120, 255, 0.15);
    padding: min(4px, calc(4 / 1414 * 100vw)) min(12px, calc(12 / 1414 * 100vw));
    border-radius: min(20px, calc(20 / 1414 * 100vw));
    font-family: "PingFang SC Semibold";
}

.result-time {
    font-size: min(12px, calc(12 / 1414 * 100vw));
    color: rgba(255, 255, 255, 0.4);
    font-family: "PingFang SC Regular";
}

.result-title {
    font-size: min(18px, calc(18 / 1414 * 100vw));
    color: #FFFFFF;
    font-family: "PingFang SC Semibold";
    margin-bottom: min(10px, calc(10 / 1414 * 100vw));
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.result-description {
    font-size: min(14px, calc(14 / 1414 * 100vw));
    color: rgba(255, 255, 255, 0.6);
    font-family: "PingFang SC Regular";
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 关键词高亮 */
.search-highlight {
    color: #00D4FF;
    background: rgba(0, 212, 255, 0.15);
    padding: 0 min(2px, calc(2 / 1414 * 100vw));
    border-radius: min(2px, calc(2 / 1414 * 100vw));
}

/* 无结果 */
.no-results {
    text-align: center;
    padding: min(80px, calc(80 / 1414 * 100vw)) 0;
}

.no-results-icon {
    width: min(100px, calc(100 / 1414 * 100vw));
    height: min(100px, calc(100 / 1414 * 100vw));
    margin: 0 auto min(30px, calc(30 / 1414 * 100vw));
    opacity: 0.3;
}

.no-results-icon img {
    width: 100%;
    height: 100%;
    filter: brightness(0) invert(1);
}

.no-results-text {
    font-size: min(18px, calc(18 / 1414 * 100vw));
    color: rgba(255, 255, 255, 0.7);
    font-family: "PingFang SC Regular";
    margin-bottom: min(10px, calc(10 / 1414 * 100vw));
}

.no-results-hint {
    font-size: min(14px, calc(14 / 1414 * 100vw));
    color: rgba(255, 255, 255, 0.4);
    font-family: "PingFang SC Regular";
}

/* 空状态 */
.search-empty {
    text-align: center;
    padding: min(100px, calc(100 / 1414 * 100vw)) 0;
}

.empty-icon {
    width: min(80px, calc(80 / 1414 * 100vw));
    height: min(80px, calc(80 / 1414 * 100vw));
    margin: 0 auto min(25px, calc(25 / 1414 * 100vw));
    opacity: 0.4;
}

.empty-icon img {
    width: 100%;
    height: 100%;
    filter: brightness(0) invert(1);
}

.empty-text {
    font-size: min(16px, calc(16 / 1414 * 100vw));
    color: rgba(255, 255, 255, 0.5);
    font-family: "PingFang SC Regular";
}

/* 分页 */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: min(20px, calc(20 / 1414 * 100vw));
    margin-top: min(50px, calc(50 / 1414 * 100vw));
    padding-top: min(30px, calc(30 / 1414 * 100vw));
    border-top: min(1px, calc(1 / 1414 * 100vw)) solid rgba(255, 255, 255, 0.1);
}

.pagination-btn {
    padding: min(10px, calc(10 / 1414 * 100vw)) min(25px, calc(25 / 1414 * 100vw));
    background: rgba(255, 255, 255, 0.05);
    border: min(1px, calc(1 / 1414 * 100vw)) solid rgba(255, 255, 255, 0.15);
    border-radius: min(25px, calc(25 / 1414 * 100vw));
    color: #FFFFFF;
    font-size: min(14px, calc(14 / 1414 * 100vw));
    font-family: "PingFang SC Regular";
    text-decoration: none;
    transition: all 0.3s ease;
}

.pagination-btn:hover {
    background: rgba(0, 120, 255, 0.2);
    border-color: #0078FF;
}

.pagination-info {
    font-size: min(14px, calc(14 / 1414 * 100vw));
    color: rgba(255, 255, 255, 0.5);
    font-family: "PingFang SC Regular";
}

/* 响应式 */
@media (max-width: 768px) {
    .result-item {
        flex-direction: column;
    }

    .result-image {
        width: 100%;
        height: min(180px, calc(180 / 1414 * 100vw));
    }

    .search-hero {
        padding-top: min(100px, calc(100 / 1414 * 100vw));
    }

    .search-title {
        font-size: min(28px, calc(28 / 1414 * 100vw));
    }

    .result-title {
        font-size: min(16px, calc(16 / 1414 * 100vw));
    }

    .pagination {
        flex-wrap: wrap;
    }
}