/* 主题色定义（不变） */
:root {
    --color-primary: #D32F2F;    /* 主红色 */
    --color-secondary: #B71C1C;  /* 深红色（hover/强调） */
    --color-light: #FCE4EC;     /* 浅红色（背景/辅助） */
    --color-dark: #212121;       /* 深灰色（文字） */
}

/* 轮播图指示器样式 - 提高优先级确保样式正确应用 */
.banner-dot {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background-color: rgba(255, 255, 255, 0.5) !important;
    opacity: 1 !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: 2px solid transparent !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 激活状态的指示器样式 */
.banner-dot.active {
    width: 36px !important;
    height: 12px !important;
    border-radius: 6px !important;
    background-color: #D32F2F !important;
    opacity: 1 !important;
    border-color: rgba(255, 255, 255, 0.8) !important;
}

/* 鼠标悬停效果 */
.banner-dot:hover {
    background-color: rgba(255, 255, 255, 0.8) !important;
    transform: scale(1.1) !important;
}

/* 激活状态的动画 */
.banner-dot.active::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent) !important;
    animation: shimmer 2s infinite !important;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Tailwind 工具类扩展（不变） */
@layer utilities {
    .content-auto {
        content-visibility: auto;
    }
    .text-shadow {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    .border-red-hover {
        @apply transition-all duration-300 hover:border-primary hover:shadow-lg;
    }
}

/* 全局样式（不变） */
body {
    font-family: 'Inter', system-ui, sans-serif;
    scroll-behavior: smooth;
}

/* 顶部导航修复：优化对齐与间距（新增） */
#navbar .flex.justify-between {
    align-items: center;
    gap: 1rem; /* 防止元素拥挤 */
}
#navbar .md\:flex.items-center.gap-7 a {
    white-space: nowrap; /* 避免导航文字换行 */
}

/* LOGO样式（不变） */
.navbar .flex.items-center.gap-3 {
    align-items: center;
    gap: 1rem;
}

/* 注册登录按钮样式（不变） */
a[href="#login"]:hover {
    background-color: var(--color-primary);
    color: white;
    border-color: transparent;
}
a[href="#register"] {
    background-image: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    box-shadow: 0 4px 15px rgba(211, 47, 47, 0.2);
}