/* 黄色系UX增强 - 提升用户体验和字体可见性 */

/* ======================== 字体可见性优化 ======================== */

/* 确保所有文本在黄色背景上可见 */
.panel-header h3,
.panel-header,
.hero-btn,
.category-item:hover span,
.btn-primary,
.primary-btn {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* 主标题增强可见性 */
.title-main {
    -webkit-text-stroke: 0.5px rgba(245, 127, 23, 0.3);
    filter: drop-shadow(0 2px 4px rgba(245, 127, 23, 0.2));
}

/* 次标题颜色对比优化 */
.title-sub {
    color: #F57F17 !important;
    font-weight: 500 !important;
}

/* ======================== 按钮和交互元素增强 ======================== */

/* 按钮悬停时的高亮效果 */
.hero-btn-primary:hover,
.btn-primary:hover,
.primary-btn:hover {
    box-shadow: 0 8px 25px rgba(245, 127, 23, 0.5) !important;
    filter: brightness(1.1);
}

/* 次要按钮优化 */
.hero-btn-secondary {
    border-color: #F57F17 !important;
    color: #F57F17 !important;
}

.hero-btn-secondary:hover {
    background: linear-gradient(135deg, #F57F17, #FBC02D) !important;
    border-color: #F57F17 !important;
}

/* ======================== 图标颜色增强 ======================== */

/* 确保所有图标在深色背景上可见 */
.fas, .far, .fab, .fal {
    opacity: 1 !important;
}

/* 分类按钮图标统一黄色系 */
.category-item i {
    filter: brightness(1.1);
}

/* ======================== 卡片和面板优化 ======================== */

/* 小说卡片悬停效果 */
.novel-card:hover,
.book-card:hover {
    border-color: #FBC02D !important;
    box-shadow: 0 8px 25px rgba(245, 127, 23, 0.25) !important;
}

/* 信息面板边框优化 */
.info-activity-panel {
    border-color: rgba(245, 127, 23, 0.15) !important;
}

/* ======================== 链接和文本优化 ======================== */

/* 链接悬停效果增强 */
a:hover {
    text-decoration: none !important;
    filter: brightness(0.9);
}

/* 面板内链接优化 */
.info-items a,
.activity-items a {
    transition: all 0.3s ease !important;
}

.info-items a:hover,
.activity-items a:hover {
    background: rgba(245, 127, 23, 0.08) !important;
    border-left: 3px solid #F57F17 !important;
    padding-left: 22px !important;
}

/* ======================== 统计数字优化 ======================== */

/* 数字颜色增强 */
.stat-number {
    background: linear-gradient(135deg, #F57F17, #FBC02D);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ======================== 搜索框优化 ======================== */

/* 搜索图标颜色 */
.search-box .fa-search {
    color: #F57F17 !important;
}

.search-box input:focus + .fa-search {
    color: #FBC02D !important;
}

/* ======================== 背景优化 ======================== */

/* Hero区域背景优化 */
.hero-section {
    background: linear-gradient(135deg, 
        rgba(255, 248, 225, 0.8) 0%, 
        rgba(255, 253, 231, 0.6) 50%, 
        rgba(255, 255, 255, 0.9) 100%) !important;
}

/* 分类导航背景优化 */
.category-nav {
    background: linear-gradient(135deg, 
        #ffffff 0%, 
        #FFF8E1 50%, 
        #ffffff 100%) !important;
}

/* ======================== 动画增强 ======================== */

/* 渐变动画 */
@keyframes yellowGradient {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* 应用动画到按钮 */
.hero-btn-primary {
    background-size: 200% 200% !important;
    animation: yellowGradient 3s ease infinite;
}

/* ======================== VIP和会员元素 ======================== */

/* VIP标识增强 */
.vip-badge,
.vip-tag,
.vip-card {
    background: linear-gradient(135deg, 
        #F57F17 0%, 
        #FBC02D 50%, 
        #FDD835 100%) !important;
    box-shadow: 0 4px 15px rgba(245, 127, 23, 0.3) !important;
}

/* 会员皇冠图标 */
.crown-icon,
.fa-crown {
    color: #FBC02D !important;
    filter: drop-shadow(0 2px 4px rgba(251, 192, 45, 0.4));
}

/* ======================== 热门和标签优化 ======================== */

/* 热门标签 */
.hot-tag,
.hot-badge {
    background: linear-gradient(135deg, #FFEB3B, #FFF176) !important;
    color: #E65100 !important;
    font-weight: 600 !important;
    animation: yellowPulse 2s ease-in-out infinite;
}

/* 新书标签 */
.new-tag,
.new-badge {
    background-color: #FFF176 !important;
    color: #F57F17 !important;
    border: 1px solid #FBC02D !important;
}

/* 推荐标签 */
.recommend-tag,
.recommend-badge {
    background: linear-gradient(135deg, #F57F17, #FBC02D) !important;
    box-shadow: 0 2px 8px rgba(245, 127, 23, 0.3) !important;
}

/* ======================== 表单元素优化 ======================== */

/* 输入框焦点增强 */
input:focus,
textarea:focus,
select:focus,
.form-control:focus {
    border-color: #F57F17 !important;
    box-shadow: 0 0 0 0.2rem rgba(245, 127, 23, 0.25) !important;
    outline: none !important;
}

/* 复选框和单选框 */
.form-check-input:checked {
    background-color: #F57F17 !important;
    border-color: #F57F17 !important;
    box-shadow: 0 0 4px rgba(245, 127, 23, 0.3) !important;
}

/* ======================== 导航优化 ======================== */

/* 导航链接活动状态 */
.nav a.active,
.nav-link.active {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-bottom: 2px solid #FFF176 !important;
}

/* 移动端菜单 */
.mobile-nav a.active {
    background-color: rgba(245, 127, 23, 0.1) !important;
    border-left: 3px solid #F57F17 !important;
}

/* ======================== 滚动条美化 ======================== */

/* 全局滚动条 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(245, 127, 23, 0.05);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #F57F17, #FBC02D);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #E65100, #F57F17);
}

/* ======================== 加载和状态 ======================== */

/* 加载旋转器 */
.spinner-border,
.spinner-grow {
    color: #F57F17 !important;
    border-color: #F57F17 transparent transparent transparent !important;
}

/* 进度条 */
.progress-bar {
    background: linear-gradient(90deg, #F57F17, #FBC02D, #FDD835) !important;
    background-size: 200% 100%;
    animation: progressAnimation 1.5s ease infinite;
}

@keyframes progressAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ======================== 模态框和对话框 ======================== */

/* 模态框头部 */
.modal-header {
    background: linear-gradient(135deg, #F57F17, #FBC02D) !important;
    border-bottom: 2px solid #FDD835 !important;
}

/* 模态框关闭按钮 */
.modal-header .btn-close,
.modal-header .close {
    filter: brightness(0) invert(1);
    opacity: 0.8;
}

.modal-header .btn-close:hover,
.modal-header .close:hover {
    opacity: 1;
}

/* ======================== 分页优化 ======================== */

/* 分页按钮 */
.pagination .page-link {
    color: #F57F17 !important;
    border-color: rgba(245, 127, 23, 0.2) !important;
}

.pagination .page-link:hover {
    background-color: rgba(245, 127, 23, 0.1) !important;
    border-color: #F57F17 !important;
}

.pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #F57F17, #FBC02D) !important;
    border-color: #F57F17 !important;
    box-shadow: 0 2px 8px rgba(245, 127, 23, 0.3) !important;
}

/* ======================== 表格优化 ======================== */

/* 表格头部 */
.table thead th {
    background: linear-gradient(135deg, #F57F17, #FBC02D) !important;
    color: white !important;
}

/* 表格悬停行 */
.table-hover tbody tr:hover {
    background-color: rgba(255, 248, 225, 0.7) !important;
}

/* 表格活动行 */
.table-active {
    background-color: rgba(245, 127, 23, 0.15) !important;
}

/* ======================== 徽章和标签 ======================== */

/* 徽章样式统一 */
.badge {
    font-weight: 600;
    letter-spacing: 0.3px;
}

.badge-primary {
    background: linear-gradient(135deg, #F57F17, #FBC02D) !important;
}

.badge-warning {
    background-color: #FFCA28 !important;
    color: #E65100 !important;
}

.badge-info {
    background-color: #FDD835 !important;
    color: #F57F17 !important;
}

/* ======================== 响应式优化 ======================== */

@media (max-width: 768px) {
    /* 移动端字体增强 */
    .title-main {
        font-size: 2.5rem !important;
    }
    
    .title-sub {
        font-size: 1.3rem !important;
    }
    
    /* 移动端按钮优化 */
    .hero-btn {
        padding: 12px 24px !important;
        font-size: 0.95rem !important;
    }
}

/* ======================== 无障碍优化 ======================== */

/* 焦点可见性 */
*:focus-visible {
    outline: 2px solid #F57F17 !important;
    outline-offset: 2px;
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
    .title-main,
    .hero-btn,
    .category-item {
        border: 2px solid #F57F17 !important;
    }
}

/* ======================== 打印样式 ======================== */

@media print {
    .panel-header,
    .hero-btn,
    .category-item {
        background: white !important;
        color: black !important;
        border: 1px solid #333 !important;
    }
}

/* ======================== 性能优化 ======================== */

/* 硬件加速 */
.hero-btn,
.category-item,
.novel-card {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* ======================== 结束 ======================== */