/* ========== 自定义工具类 ========== */
@layer utilities {
    .content-auto { content-visibility: auto; } /* 自动内容可见性优化 */
    .text-shadow { text-shadow: 0 2px 4px rgba(0,0,0,0.1); }
    .bg-gradient { background: linear-gradient(135deg, #f6f9fc 0%, #eef2f7 100%); }
    .transition-custom { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
}

/* ========== 全局样式 ========== */
body { scroll-behavior: smooth; }

/* ========== 动画定义 ========== */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fadeIn 0.5s ease-out forwards; }
.card { opacity: 0; animation: fadeIn 0.5s ease-out forwards; }
.card:hover { transform: translateY(-5px); }

/* ========== 组件样式优化 ========== */
.btn-primary { @apply bg-primary text-white rounded-lg font-medium hover:bg-primary/90 transition-custom hover:shadow-lg transform hover:-translate-y-0.5; }
.btn-secondary { @apply bg-secondary/10 hover:bg-secondary/20 text-secondary rounded-lg text-sm font-medium transition-custom hover:shadow-lg transform hover:-translate-y-0.5; }
.category-item.active { @apply bg-primary/10 text-primary font-medium; }
.category-item .common-tag { @apply ml-2 inline-block px-1.5 py-0.5 bg-primary/20 text-primary text-xs rounded-full; }
.category-item:has(.common-tag) { @apply bg-primary/5; }
.category-item:has(.common-tag):hover { @apply bg-primary/15; }
.search-input:focus { @apply border-primary ring-2 ring-primary/20 outline-none; }
.select-control { @apply border border-gray-200 rounded-lg px-3 py-2 text-sm focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none transition-custom bg-white; }
.icon-transition { @apply transition-custom duration-300 ease-in-out; }

/* 其他软件样式 */
.vip-tag { @apply ml-2 inline-block px-1.5 py-0.5 bg-vip/20 text-vip text-xs rounded-full; }
.vip-card { @apply border border-vip/20; }
.vip-category { @apply bg-vip/5 hover:bg-vip/15 relative; }
.vip-category::after {  @apply absolute right-3 top-1/2 transform -translate-y-1/2 text-vip text-xs font-medium; }

/* ========== 加载动画 ========== */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.animate-pulse { animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

/* ========== 响应式优化 ========== */
@media (max-width: 768px) {
    .card { animation-delay: 0.05s !important; }
    .grid-cols-1 { gap: 4rem; }
}

/* ========== 滚动条优化 ========== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 4px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ========== 通用元素优化 ========== */
a { @apply transition-custom duration-300; }
input, select, textarea { @apply transition-custom duration-300; }
.badge { @apply inline-block px-2 py-1 bg-gray-100 hover:bg-gray-200 text-neutral text-xs rounded-full transition-custom; }

/* ========== 特殊组件样式 ========== */
.back-to-top{transition:all .3s cubic-bezier(.4,0,.2,1);opacity:0;visibility:hidden;transform:translateY(10px)}
.back-to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.back-to-top:hover{transform:translateY(-3px);box-shadow:0 10px 15px -3px rgba(59,130,246,0.2)}
.back-to-top:active{transform:translateY(0);box-shadow:0 4px 6px -1px rgba(59,130,246,0.1)}

.modal-overlay{transition:opacity .3s ease}
.modal-content{transition:transform .3s ease,opacity .3s ease;transform:translateY(20px);opacity:0}
.modal-open .modal-overlay{opacity:1}
.modal-open .modal-content{transform:translateY(0);opacity:1}

.form-input:focus+.form-label,.form-input:not(:placeholder-shown)+.form-label{transform:translateY(-1.5rem) scale(0.85);color:#3B82F6}
.btn-accent{transition:all .3s cubic-bezier(.4,0,.2,1)}
.btn-accent:hover{transform:translateY(-2px);box-shadow:0 10px 15px -3px rgba(139,92,246,0.2)}
.btn-accent:active{transform:translateY(0);box-shadow:0 4px 6px -1px rgba(139,92,246,0.1)}

.mobile-blocker{position:fixed;top:0;left:0;width:100%;height:100%;background:white;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center}
.mobile-blocker i{font-size:50px;color:#3B82F6;margin-bottom:20px}
.mobile-blocker h2{font-size:24px;color:#1E293B;margin-bottom:10px}
.mobile-blocker p{font-size:16px;color:#64748B;max-width:300px}

header{position:sticky;top:0;z-index:100;background:white}
.header-notice{flex:1;margin:0 20px;min-width:200px}

.nav-notice-bar{background:linear-gradient(135deg,#E8F3FF 0%,#F0F7FF 100%);border:1px solid #D1E7FF;border-radius:8px;padding:6px 12px;box-shadow:0 2px 8px rgba(22,93,255,0.08);/*position:relative;*/overflow:hidden;height:36px;display:flex;align-items:center}
.nav-notice-bar::before{content:'';position:absolute;top:0;left:0;width:100%;height:1px;background:linear-gradient(90deg,transparent,#165DFF33,transparent);animation:noticeShine 6s infinite linear}
@keyframes noticeShine{0%{background-position:-100% 0}100%{background-position:100% 0}}

.nav-notice-container{display:flex;align-items:center;width:100%;position:relative}
.nav-notice-tag{background:#165DFF;color:white;font-weight:500;padding:2px 8px;border-radius:12px;font-size:11px;margin-right:8px;box-shadow:0 1px 4px rgba(22,93,255,0.2);flex-shrink:0;display:flex;align-items:center}
.nav-notice-tag i{font-size:9px;margin-right:3px}

.nav-notice-icon{font-size:14px;color:#165DFF;margin-right:8px;animation:noticePulse 3s infinite ease-in-out;flex-shrink:0}
@keyframes noticePulse{0%,100%{transform:scale(1);opacity:0.8}50%{transform:scale(1.05);opacity:1}}

.nav-notice-content{flex:1;overflow:hidden;height:24px;position:relative}
.nav-notice-list{position:absolute;top:0;left:0;width:100%;transition:transform 0.5s cubic-bezier(0.34,1.56,0.64,1)}
.nav-notice-item{height:24px;line-height:24px;display:flex;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;font-weight:500;color:#0F172A;letter-spacing:0.1px}

.nav-notice-controls{display:flex;gap:4px;margin-left:8px;flex-shrink:0}
.nav-notice-btn{width:20px;height:20px;border-radius:50%;background:white;color:#165DFF;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;border:1px solid #E0EBFF;box-shadow:0 1px 3px rgba(22,93,255,0.05);font-size:10px}
.nav-notice-btn:hover{background:#165DFF;color:white;transform:translateY(-1px);box-shadow:0 2px 6px rgba(22,93,255,0.15);border-color:#165DFF}

.nav-notice-dots{display:flex;gap:4px;margin-left:8px;align-items:center;flex-shrink:0}
.nav-notice-dot{width:4px;height:4px;border-radius:50%;background:#C9D9FF;transition:all .3s ease}
.nav-notice-dot.active{background:#165DFF;width:12px;border-radius:2px}

main{padding-top:20px}
#popup-notice{z-index:999}

.popup-notice-item{padding:4px 0;font-size:15px;color:#0F172A;line-height:1.5}
.popup-notice-item:not(:last-child){border-bottom:1px solid #F0F0F0;margin-bottom:8px;padding-bottom:8px}

.pagination-link{transition:all .2s ease}
@media (max-width:1024px){.header-notice{display:none}}

.pagination-link.active,a.bg-primary.text-white{background-color:#2563eb !important;color:white !important;font-weight:600;box-shadow:inset 0 2px 4px rgba(0,0,0,0.1);position:relative}
a.bg-primary.text-white::after{content:'';position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;border:2px solid #3b82f6;border-radius:4px;pointer-events:none}

.card{cursor:pointer}
.icon-link{text-decoration:none}

/* VIP密码验证样式 */
.vip-auth-container { @apply max-w-md mx-auto bg-white rounded-xl shadow-vip p-8 animate-fade-in; }
.vip-auth-icon { @apply w-16 h-16 bg-vip/10 rounded-full flex items-center justify-center mx-auto mb-4; }

/* 提交次数提示样式 */
.submit-count-info { @apply text-sm text-gray-500 mb-4; }
.success-alert { @apply bg-green-50 border border-green-200 text-green-600 rounded-lg p-4 mb-6 text-center; }

/* 验证码样式 */
.captcha-text { min-width: 100px; text-align: center; }