/* 自定义字体 */
.font-inter {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* 导航链接样式 */
.nav-link {
    @apply text-gray-300 hover:text-white transition-colors duration-300 relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 50%;
    background: linear-gradient(90deg, #3B82F6, #10B981);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.nav-link:hover::after {
    width: 100%;
}

/* 按钮样式 */
.btn-primary {
    @apply bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 
           text-white px-8 py-3 rounded-lg font-semibold transition-all duration-300 
           transform hover:scale-105 shadow-lg hover:shadow-xl inline-flex items-center;
}

.btn-secondary {
    @apply bg-transparent border-2 border-gray-600 hover:border-blue-400 text-gray-300 hover:text-white 
           px-8 py-3 rounded-lg font-semibold transition-all duration-300 
           transform hover:scale-105 inline-flex items-center;
}

/* 网格背景 */
.bg-grid-pattern {
    background-image: 
        linear-gradient(rgba(59, 130, 246, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59, 130, 246, 0.1) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: grid-move 20s linear infinite;
}

@keyframes grid-move {
    0% { transform: translate(0, 0); }
    100% { transform: translate(50px, 50px); }
}

/* 浮动动画元素 */
.floating-element {
    position: absolute;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(16, 185, 129, 0.2));
    border-radius: 50%;
    animation: float 6s ease-in-out infinite;
}

.floating-element:nth-child(1) {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.floating-element:nth-child(2) {
    top: 60%;
    right: 15%;
    width: 40px;
    height: 40px;
    animation-delay: 2s;
}

.floating-element:nth-child(3) {
    bottom: 30%;
    left: 20%;
    width: 80px;
    height: 80px;
    animation-delay: 4s;
}

.floating-delay-1 { animation-delay: 0s; }
.floating-delay-2 { animation-delay: 2s; }
.floating-delay-3 { animation-delay: 4s; }

@keyframes float {
    0%, 100% { 
        transform: translateY(0px) rotate(0deg);
        opacity: 0.3;
    }
    50% { 
        transform: translateY(-20px) rotate(180deg);
        opacity: 0.6;
    }
}

/* 卡片悬停效果 */
.card-hover {
    @apply transition-all duration-300 transform hover:scale-105 hover:shadow-2xl;
}

/* 渐变文字 */
.gradient-text {
    @apply bg-gradient-to-r from-blue-400 to-green-400 bg-clip-text text-transparent;
}

/* 加载动画 */
.loading-dots {
    display: inline-block;
}

.loading-dots::after {
    content: '';
    animation: loading-dots 1.5s steps(4, end) infinite;
}

@keyframes loading-dots {
    0%, 20% { content: ''; }
    40% { content: '.'; }
    60% { content: '..'; }
    80%, 100% { content: '...'; }
}

/* 响应式隐藏/显示 */
.mobile-only {
    @apply block md:hidden;
}

.desktop-only {
    @apply hidden md:block;
}

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

::-webkit-scrollbar-track {
    background: #1f2937;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #3B82F6, #10B981);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #2563EB, #059669);
}

/* 平滑滚动 */
html {
    scroll-behavior: smooth;
}

/* 图像样式 */
.team-avatar {
    @apply w-24 h-24 rounded-full object-cover border-4 border-gray-600 transition-all duration-300;
}

.team-avatar:hover {
    @apply border-blue-400 transform scale-110;
}

/* 表单样式 */
.form-input {
    @apply w-full px-4 py-3 bg-gray-800 border border-gray-600 rounded-lg 
           text-white placeholder-gray-400 focus:border-blue-400 focus:outline-none 
           transition-colors duration-300;
}

.form-textarea {
    @apply w-full px-4 py-3 bg-gray-800 border border-gray-600 rounded-lg 
           text-white placeholder-gray-400 focus:border-blue-400 focus:outline-none 
           transition-colors duration-300 resize-vertical min-h-32;
}

/* 动画效果 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease-out forwards;
}

.animate-delay-1 { animation-delay: 0.1s; }
.animate-delay-2 { animation-delay: 0.2s; }
.animate-delay-3 { animation-delay: 0.3s; }
.animate-delay-4 { animation-delay: 0.4s; }

/* 视频容器 */
.video-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    background: #000;
    border-radius: 12px;
    overflow: hidden;
}

.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 课程卡片样式 */
.course-card {
    @apply bg-gray-800 rounded-xl p-6 border border-gray-700 
           hover:border-blue-500 transition-all duration-300 
           transform hover:scale-105 hover:shadow-xl;
}

.course-card:hover {
    box-shadow: 0 20px 40px rgba(59, 130, 246, 0.1);
}

/* 作品集网格 */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
}

@media (max-width: 768px) {
    .portfolio-grid {
        grid-template-columns: 1fr;
    }
}

/* 管理界面样式 */
.admin-sidebar {
    @apply w-64 bg-gray-800 border-r border-gray-700 min-h-screen p-4;
}

.admin-main {
    @apply flex-1 p-6 bg-gray-900 min-h-screen;
}

.admin-card {
    @apply bg-gray-800 rounded-lg p-6 border border-gray-700 mb-6;
}

/* 表格样式 */
.data-table {
    @apply w-full bg-gray-800 rounded-lg overflow-hidden border border-gray-700;
}

.data-table th {
    @apply bg-gray-700 px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider;
}

.data-table td {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-300 border-t border-gray-700;
}

/* 状态指示器 */
.status-active {
    @apply inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800;
}

.status-inactive {
    @apply inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800;
}

/* 通知样式 */
.notification {
    @apply fixed top-4 right-4 z-50 bg-gray-800 border border-gray-600 
           rounded-lg p-4 shadow-lg transform transition-all duration-300;
}

.notification.success {
    @apply border-green-500 bg-green-900/50;
}

.notification.error {
    @apply border-red-500 bg-red-900/50;
}

/* 加载状态 */
.loading {
    @apply opacity-50 pointer-events-none;
}

.spinner {
    @apply inline-block w-4 h-4 border-2 border-gray-300 border-t-blue-500 rounded-full animate-spin;
}

/* 模态框样式 */
.modal-overlay {
    @apply fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4;
}

.modal-content {
    @apply bg-gray-800 rounded-xl p-6 max-w-2xl w-full max-h-screen overflow-y-auto border border-gray-700;
}