/* 自定义CSS样式 */
/* 视觉微优化：改进可读性与可访问性 */
:root { color-scheme: light dark; }
img { max-width: 100%; height: auto; }
a { text-underline-offset: 2px; }
.prose a { color: #2563eb; }

/* 自定义滚动条样式 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* 文本域自定义样式 */
textarea:focus {
    outline: none;
}

/* 工具框过渡动画 */
.tool-card-transition {
    transition: all 0.3s ease-out;
}

/* 移动端触摸优化 */
@media (hover: none) and (pointer: coarse) {
    .hover\:shadow-lg:hover {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }
    
    button, .btn, a[role="button"] {
        min-height: 44px; /* Apple推荐的最小触摸目标 */
        min-width: 44px;
    }
}

/* 改进移动端可读性 */
@media (max-width: 640px) {
    .prose {
        font-size: 16px;
        line-height: 1.6;
    }
    
    .prose h1 {
        font-size: 1.875rem;
        line-height: 1.2;
    }
    
    .prose h2 {
        font-size: 1.5rem;
        line-height: 1.3;
    }
}

/* 自定义字体使用 */
body {
    font-family: 'SF Pro Display', 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* Core Web Vitals优化 */
/* 防止CLS - 为图像和媒体保留空间 */
img, video, iframe {
    aspect-ratio: attr(width) / attr(height);
}

/* 优化LCP - 预加载关键资源 */
.hero-section {
    contain: layout style;
}

/* 减少DOM复杂度 */
.complex-grid {
    contain: layout;
}

/* 优化FID - 减少主线程阻塞 */
.defer-js {
    loading: lazy;
}

/* 预设骨架屏防止CLS */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

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