@layer utilities {
    /* 基础通用工具类 */
    .content-auto { content-visibility: auto; }
    .text-shadow { text-shadow: 0 2px 4px rgba(0,0,0,0.1); }
    .text-shadow-lg { text-shadow: 0 4px 8px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.08); }
    .scrollbar-hide::-webkit-scrollbar { display: none; }
    .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
    .child-friendly { border-radius: 12px; transition: all 0.3s ease; }
    .child-friendly:hover { transform: translateY(-5px); }
    .transition-transform-opacity { transition-property: transform, opacity; }
    .section-divider { @apply h-px bg-neutral-200 my-8; } /* 保留当前样式的my-8间距 */
    .section-title-line { @apply pb-2 border-b-2 border-neutral-200; }

    /* 过滤/选中状态类 */
    .filter-active { background-color: rgba(79, 158, 84, 0.1); color: #4F9E54; border-color: #4F9E54; }
    .filter-tag { @apply px-3 py-1 bg-primary/10 text-primary rounded-full text-sm inline-flex items-center mr-2 mb-2 cursor-pointer hover:bg-primary/20 transition-colors; }
    .filter-tag.active { @apply bg-primary text-white; }

    /* 导航/选项卡类 */
    .nav-breadcrumb { @apply text-neutral-500 text-sm; }
    .nav-breadcrumb a { @apply hover:text-primary transition-colors; }
    .lesson-tab { @apply px-4 py-2 border-b-2 border-transparent text-neutral-600 hover:text-primary hover:border-primary/30 transition-colors; }
    .lesson-tab.active { @apply text-primary border-primary font-medium; }
    .channel-nav-item { @apply px-4 py-2 text-neutral-600 hover:text-primary transition-colors border-b-2 border-transparent hover:border-primary; }
    .channel-nav-item.active { @apply text-primary border-primary font-medium; }
    .category-nav-item { @apply px-4 py-2 text-sm text-neutral-600 hover:text-primary hover:bg-primary/5 rounded-md transition-colors; }
    .category-nav-item.active { @apply text-primary bg-primary/10 font-medium; }

    /* 按钮/操作类 */
    .btn-action { @apply inline-flex items-center px-3 py-1 bg-neutral-100 text-neutral-600 rounded-full text-sm hover:bg-neutral-200 transition-colors cursor-pointer; }
    .btn-primary-action { @apply inline-flex items-center px-4 py-2 bg-primary text-white rounded-lg font-medium shadow-md hover:bg-primary/90 transform hover:-translate-y-0.5 transition-all duration-200 cursor-pointer; }
    .btn-secondary-action { @apply inline-flex items-center px-4 py-2 bg-secondary text-white rounded-lg font-medium shadow-md hover:bg-secondary/90 transform hover:-translate-y-0.5 transition-all duration-200 cursor-pointer; }
    .buy-button { @apply w-full py-3 bg-accent text-white rounded-lg font-bold text-lg shadow-lg hover:bg-accent/90 transform hover:-translate-y-0.5 transition-all duration-200 mt-4 mb-2; }

    /* 列表/卡片类 */
    .lesson-section { @apply bg-white rounded-xl shadow-elevation-1 p-6 mb-6 transition-all duration-300 hover:shadow-elevation-2; }
    .resource-item { @apply flex items-center p-3 border border-neutral-100 rounded-lg hover:border-primary/30 hover:bg-primary/5 transition-all; }
    .related-item { @apply mb-4 last:mb-0; }
    .related-item-img { @apply w-full h-32 object-cover rounded-lg mb-2; }
    .related-item-title { @apply text-sm font-medium line-clamp-2 hover:text-primary transition-colors; }
    .lesson-item { @apply bg-white shadow-elevation-1 p-1 border-l-4 border-primary/20; }
    .lesson-item h3 { @apply text-lg mb-2 line-clamp-2; }
    .lesson-item-meta { @apply flex justify-between items-center text-sm text-neutral-500 mt-3; }
    .result-item { @apply bg-white rounded-xl shadow-elevation-1 overflow-hidden transition-all duration-300 hover:shadow-elevation-2; }

    /* 分页类 */
    .pagination { @apply flex justify-center items-center gap-2 mt-6; }
    .pagination a, .pagination span { @apply px-3 py-1.5 text-sm rounded-md transition-colors; }
    .pagination a { @apply bg-neutral-100 text-neutral-600 hover:bg-primary hover:text-white; }
    .pagination span.current { @apply bg-primary text-white font-medium; }
    .pagination-item { @apply w-10 h-10 flex items-center justify-center rounded-lg border border-neutral-300 text-neutral-700 hover:border-primary hover:text-primary transition-colors; }
    .pagination-item.active { @apply bg-primary text-white border-primary; }

    /* 用户菜单类 */
    .user-menu-container { position: relative; padding: 4px; }
    .user-menu-button img { transition: transform 0.3s ease; }
    .user-menu-container:hover .user-menu-button img { transform: scale(1.1); }
    .user-dropdown { margin-top: 2px; }
    .user-dropdown a { transition: all 0.2s ease; }
    .user-dropdown a:hover i { transform: translateX(2px); }

    /* 分享/弹窗类 */
    .share-dropdown { @apply absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-elevation-3 py-2 z-10 hidden; }
    .share-item { @apply block px-4 py-2 text-sm text-neutral-700 hover:bg-primary/5 hover:text-primary transition-colors; }
    .paywall-modal { @apply fixed inset-0 bg-black/50 z-50 flex items-center justify-center hidden rounded-3xl; }
    .paywall-content { @apply bg-white rounded-2xl p-0 max-w-md w-full mx-4 transform transition-all duration-300 scale-95 opacity-0 overflow-hidden; }
    .modal-backdrop { backdrop-filter: blur(3px); }
    #download-modal, #purchase-modal { z-index: 60; }
    .download-iframe-container, .purchase-iframe-container { height: 500px; }
    .pay-iframe-container { height: 400px; }

    /* 视频相关类 */
    .video-container:hover .video-controls { opacity: 1; transform: translateY(0); }
    .video-control-hover { transition: all 0.3s ease; }
    .video-progress { height: 4px; background: rgba(255,255,255,0.2); transition: height 0.2s ease; }
    .video-container:hover .video-progress { height: 6px; }
    .video-progress-filled { background: #4F9E54; height: 100%; width: 0%; transition: width 0.1s linear; }
    .video-tab { position: relative; transition: all 0.3s ease; }
    .video-tab.active { color: #4F9E54; font-weight: 600; }
    .video-tab.active::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; background-color: #4F9E54; }
    .video-duration { position: absolute; bottom: 4px; right: 4px; background: rgba(0,0,0,0.7); color: white; font-size: 12px; padding: 1px 4px; border-radius: 3px; }
    .play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.8); opacity: 0; transition: all 0.3s ease; background-color: rgba(79, 158, 84, 0.9); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; }
    .video-card:hover .play-icon { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    .video-card:hover img { transform: scale(1.05); filter: brightness(0.8); }
    .video-thumbnail { overflow: hidden; position: relative; }
    .video-thumbnail img { transition: all 0.5s ease; }
    .video-wrapper { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden; background: #000; }
    .video-iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
    .iframe-container { position: relative; width: 100%; height: 100%; overflow: hidden; min-height: 300px; }

    /* 加载/动画类 */
    .loader { border-top-color: #4F9E54; animation: spinner 1s linear infinite; } /* 保留当前样式的1s动画时长 */
    .search-layer-enter { animation: searchLayerIn 0.3s ease forwards; @apply opacity-100 transform translate-y-0; }
    .search-layer-exit { animation: searchLayerOut 0.3s ease forwards; @apply opacity-0 transform translate-y-[-20px]; }

    /* 动画关键帧 */
    @keyframes spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
    @keyframes searchLayerIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes searchLayerOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-20px); } }
}