:root {
                --card-width: clamp(150px, 25vw, 200px);
                --base-font: clamp(14px, 4vw, 16px);
                --large-font: clamp(16px, 5vw, 18px);
            }

            html, body {
                height: 100%;
                margin: 0;
                touch-action: manipulation;
            }

            body {
                display: flex;
                flex-direction: column;
                padding-top: 56px;
            }

            /* 搜索区域 */
            .search-box {
                width: min(95%, 600px);
                margin: 10px auto;
                padding-top: 200px;
            }

            /* 结果容器 */
            .results-container {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(250px, 150px));
                justify-content: center;
                /* 单元格内部居中 */
                gap: 1rem;
                width: 95%;
                max-width: 1200px;
                margin: 0 auto;
                padding: 1rem;
            }

            /* 卡片通用样式 */
            .result-card {
                width: 100%;
                /* aspect-ratio: 4/3; */
                background: #fff;
                border: 1px solid #dee2e6;
                border-radius: 12px;
                padding: 1rem;
                transition: transform 0.2s ease;
                text-align: center;
            }

            .avatar-img {
                width: clamp(60px, 12vw, 100px);
                height: clamp(60px, 12vw, 100px);
                object-fit: cover;
                border-radius: 50%;
            }

            /* 文字排版 */
            .card-content {
                font-size: var(--base-font);
                line-height: 1.5;
            }

            .qq {
                font-size: var(--large-font);
                margin: 8px 0;
            }

            .btn-auth {
                font-size: var(--large-font);
                padding: 8px 12px;
                width: 100%;
            }

            .result-card:hover {
                transform: translateY(-5px) scale(1.02);
                box-shadow: 0 8px 20px rgba(0,0,0,0.1);
            }

            /* 移动端适配 */
            @media (max-width: 768px) {
                .results-container {
                    grid-template-columns: repeat(2, 1fr);
                    gap: 0.8rem;
                    justify-content: center;
                    /* 整体容器居中 */
                }

                .result-card {
                    padding: 0.8rem;
                }
            }

            @media (max-width: 480px) {
                :root {
                    --base-font: 15px;
                    --large-font: 17px;
                }
            }

            /* 交互优化 */
            .btn-auth:active {
                transform: scale(0.95);
            }

            .skeleton-loader {
                animation: skeleton-loading 1.5s infinite ease-in-out;
                background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
                background-size: 200% 100%;
            }

            @keyframes skeleton-loading {
                0% {
                    background-position: 200% 0;
                }

                100% {
                    background-position: -200% 0;
                }
            }