// AppPlaza 组件样式
// 仅在移动端（≤768px）生效

@media (max-width: 768px) {
    .app-plaza {
        display: flex;
        flex-direction: column;
        padding: 0 var(--h5-spacing-lg);
        padding-top: var(--h5-spacing-lg);
        padding-bottom: var(--h5-spacing-2xl);
    }

    // ===== 顶部功能分类 =====
    .feature-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--h5-spacing-md);
        margin-bottom: var(--h5-spacing-xl);

        .feature-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--h5-spacing-sm);
            padding: var(--h5-spacing-lg) var(--h5-spacing-md);
            background: var(--h5-bg-secondary);
            border: none;
            border-radius: var(--h5-radius-lg);
            cursor: pointer;
            transition: var(--h5-transition);
            box-shadow: var(--h5-shadow-sm);

            &:active {
                background: var(--h5-bg-tertiary);
                transform: scale(0.95);
            }

            .feature-icon {
                font-size: 32px;
                line-height: 1;
            }

            .feature-label {
                font-size: var(--h5-font-sm);
                color: var(--h5-text-primary);
                font-weight: var(--h5-font-weight-medium);
            }
        }
    }

    // ===== 分类 Tab =====
    .category-tabs {
        display: flex;
        gap: var(--h5-spacing-lg);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        margin-bottom: var(--h5-spacing-lg);
        padding-bottom: var(--h5-spacing-sm);

        &::-webkit-scrollbar {
            display: none;
        }

        .category-tab {
            flex-shrink: 0;
            padding: var(--h5-spacing-sm) var(--h5-spacing-md);
            background: transparent;
            border: none;
            font-size: var(--h5-font-base);
            font-weight: var(--h5-font-weight-medium);
            color: var(--h5-text-secondary);
            cursor: pointer;
            transition: var(--h5-transition);
            position: relative;

            &.active {
                color: var(--h5-text-primary);
                font-weight: var(--h5-font-weight-semibold);

                &::after {
                    content: '';
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 20px;
                    height: 3px;
                    background: var(--h5-accent);
                    border-radius: 3px 3px 0 0;
                }
            }

            &:active {
                opacity: 0.7;
            }
        }
    }

    // ===== 2 列卡片网格 =====
    .app-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--h5-spacing-md);

        .app-card-wrapper {
            // 点击反馈
            &:active {
                opacity: 0.8;
            }
        }
    }
}
