:root {
    --touch-target-size: 44px;
}

/* 触摸友好样式 */
.touch-friendly {
    min-width: var(--touch-target-size);
    min-height: var(--touch-target-size);
    padding: 0.75rem;
    cursor: pointer;
}

/* 响应式间距 */
.mobile-safe-padding {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
}

/* 响应式文本 */
.text-responsive-sm {
    font-size: clamp(0.875rem, 2vw, 1rem);
}

.text-responsive-md {
    font-size: clamp(1rem, 3vw, 1.25rem);
}

.text-responsive-lg {
    font-size: clamp(1.25rem, 4vw, 1.75rem);
}

.text-responsive-xl {
    font-size: clamp(1.5rem, 5vw, 2.5rem);
}

/* 响应式图像 */
.img-responsive {
    max-width: 100%;
    height: auto;
}

/* 响应式卡片 */
.card-responsive {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
}

/* 确保表单元素在移动设备上也有足够的触摸区域 */
input.touch-friendly,
select.touch-friendly,
button.touch-friendly {
    min-height: var(--touch-target-size);
}

/* 媒体查询补充 */
@media (max-width: 640px) {
    .container {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }

    /* 调整小屏幕上的导航栏 */
    .navbar {
        padding-left: max(0.5rem, env(safe-area-inset-left));
        padding-right: max(0.5rem, env(safe-area-inset-right));
    }

    /* 调整小屏幕上的按钮大小 */
    .btn {
        padding: 0.75rem 1.25rem;
        font-size: 0.9rem;
    }
}