/* 书院雅韵主题：降低模板化渐变感，强化文言学习氛围 */
:root {
    --academy-ink: #263238;
    --academy-muted: #667085;
    --academy-paper: #fffaf0;
    --academy-paper-soft: #fffdf7;
    --academy-surface: rgba(255, 253, 247, 0.94);
    --academy-border: rgba(130, 93, 45, 0.16);
    --academy-primary: #8b5e34;
    --academy-primary-dark: #5f3f23;
    --academy-primary-soft: #f3e5cc;
    --academy-accent: #b45309;
    --academy-green: #496b4f;
    --academy-shadow: 0 16px 42px rgba(86, 64, 38, 0.13);
    --academy-shadow-soft: 0 8px 24px rgba(86, 64, 38, 0.09);
}

body {
    color: var(--academy-ink);
    background:
        radial-gradient(circle at 16% 12%, rgba(226, 197, 142, 0.18), transparent 32%),
        radial-gradient(circle at 84% 8%, rgba(73, 107, 79, 0.12), transparent 30%),
        linear-gradient(180deg, #fffaf0 0%, #f8efe1 48%, #f5ead9 100%) !important;
    background-attachment: fixed;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background-image:
        linear-gradient(rgba(139, 94, 52, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(139, 94, 52, 0.025) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0.25));
}

.modern-navbar,
.modern-navbar.scrolled,
.navbar.fixed-top {
    background: linear-gradient(135deg, #5f3f23 0%, #8b5e34 58%, #496b4f 100%) !important;
    border-bottom: 1px solid rgba(255, 245, 225, 0.22);
    box-shadow: 0 10px 30px rgba(69, 44, 24, 0.18) !important;
}

.navbar-brand-hero {
    letter-spacing: 0.04em;
}

.navbar-icon {
    background: rgba(255, 247, 231, 0.18) !important;
    border: 1px solid rgba(255, 247, 231, 0.28);
    border-radius: 12px;
}

.modern-navbar .nav-link {
    border-radius: 999px !important;
}

.modern-navbar .nav-link:hover,
.modern-navbar .nav-link.active {
    background: rgba(255, 247, 231, 0.16) !important;
}

.navbar-search .input-group {
    background: rgba(255, 250, 240, 0.18) !important;
    border: 1px solid rgba(255, 250, 240, 0.18);
}

.glass-card,
.card,
.modal-content,
.dropdown-menu {
    background: var(--academy-surface) !important;
    border: 1px solid var(--academy-border) !important;
    box-shadow: var(--academy-shadow-soft) !important;
}

.card,
.glass-card,
.modal-content {
    border-radius: 18px !important;
}

.btn-primary,
.bg-gradient-primary,
.search-btn,
.upgrade-btn,
.btn-onboarding-start {
    background: linear-gradient(135deg, var(--academy-primary) 0%, var(--academy-primary-dark) 100%) !important;
    border-color: var(--academy-primary) !important;
    box-shadow: 0 10px 22px rgba(139, 94, 52, 0.2) !important;
}

.btn-primary:hover,
.upgrade-btn:hover,
.btn-onboarding-start:hover {
    filter: brightness(1.04);
    transform: translateY(-1px);
}

.btn-outline-primary {
    color: var(--academy-primary) !important;
    border-color: rgba(139, 94, 52, 0.42) !important;
}

.btn-outline-primary:hover {
    color: #fff !important;
    background: var(--academy-primary) !important;
    border-color: var(--academy-primary) !important;
}

.text-primary,
.link-primary {
    color: var(--academy-primary) !important;
}

.badge.bg-primary,
.progress-bar {
    background: linear-gradient(135deg, var(--academy-primary) 0%, var(--academy-green) 100%) !important;
}

.form-control,
.form-select {
    border-color: rgba(139, 94, 52, 0.22) !important;
    background-color: rgba(255, 253, 247, 0.9) !important;
    border-radius: 12px !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--academy-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(139, 94, 52, 0.14) !important;
}

.table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(139, 94, 52, 0.035);
    color: var(--academy-ink);
}

.table thead th {
    color: var(--academy-primary-dark);
    background: rgba(243, 229, 204, 0.55) !important;
    border-bottom-color: rgba(139, 94, 52, 0.18) !important;
}

.main-content {
    position: relative;
}

.main-content > .container,
.main-content > .container-fluid {
    position: relative;
}

.home-hero,
.hero-section,
.learning-hero,
.test-hero {
    background: linear-gradient(135deg, rgba(95, 63, 35, 0.94) 0%, rgba(139, 94, 52, 0.92) 52%, rgba(73, 107, 79, 0.92) 100%) !important;
}

.interactive-learning-container {
    background:
        radial-gradient(circle at top left, rgba(255, 250, 240, 0.7), transparent 34%),
        linear-gradient(135deg, #f6ead7 0%, #efe0c6 42%, #d9e1d2 100%) !important;
}

.learning-header,
.word-learning-card,
.answer-section,
.meaning-card,
.onboarding-modal,
.filter-panel {
    background: rgba(255, 253, 247, 0.95) !important;
    border: 1px solid var(--academy-border) !important;
    box-shadow: var(--academy-shadow-soft) !important;
}

.sentence-display {
    background:
        linear-gradient(180deg, rgba(255, 253, 247, 0.98), rgba(255, 248, 232, 0.96)) !important;
    border: 1px solid rgba(139, 94, 52, 0.16) !important;
    color: #2f261f !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), var(--academy-shadow-soft) !important;
}

.learning-word {
    background: linear-gradient(180deg, rgba(243, 229, 204, 0.45), rgba(243, 229, 204, 0.9));
    color: #7c3f12 !important;
    border-bottom: 2px solid rgba(180, 83, 9, 0.45);
    border-radius: 6px;
    padding: 0 0.14em;
}

.answer-btn.know,
.know-btn,
.btn-know {
    background: linear-gradient(135deg, #496b4f 0%, #31523b 100%) !important;
    box-shadow: 0 10px 22px rgba(73, 107, 79, 0.18) !important;
}

.answer-btn.unknown,
.unknown-btn,
.btn-unknown {
    background: linear-gradient(135deg, #b45309 0%, #8b3d09 100%) !important;
    box-shadow: 0 10px 22px rgba(180, 83, 9, 0.18) !important;
}

.btn-next-primary.is-loading {
    opacity: 0.82;
    cursor: wait;
}

.btn-next-primary.is-loading i {
    animation: academy-spin 0.9s linear infinite;
}

@keyframes academy-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.listen-container,
.listen-shell,
.listen-card {
    background-color: transparent;
}

.toast {
    border-radius: 14px !important;
    border: 1px solid var(--academy-border) !important;
}

h1, h2, h3,
.display-1, .display-2, .display-3, .display-4,
.hero-title, .section-title, .learning-title {
    color: #2f261f;
    letter-spacing: -0.02em;
}

.text-muted,
.hero-subtitle,
.section-subtitle {
    color: var(--academy-muted) !important;
}

.home-hero h1,
.home-hero h2,
.home-hero h3,
.home-hero .hero-title,
.hero-section h1,
.hero-section h2,
.hero-section h3,
.hero-section .hero-title,
.learning-hero h1,
.learning-hero h2,
.learning-hero h3,
.learning-hero .hero-title,
.test-hero h1,
.test-hero h2,
.test-hero h3,
.test-hero .hero-title {
    color: #fff8e8 !important;
}

.home-hero .hero-subtitle,
.hero-section .hero-subtitle,
.learning-hero .hero-subtitle,
.test-hero .hero-subtitle {
    color: rgba(255, 248, 232, 0.84) !important;
}

.home-hero,
.hero-section,
.learning-hero,
.test-hero {
    position: relative;
    overflow: hidden;
}

.home-hero::after,
.hero-section::after,
.learning-hero::after,
.test-hero::after {
    content: "";
    position: absolute;
    right: -80px;
    bottom: -120px;
    width: 320px;
    height: 320px;
    border: 1px solid rgba(255, 247, 231, 0.16);
    border-radius: 50%;
    box-shadow: inset 0 0 0 28px rgba(255, 247, 231, 0.035);
    pointer-events: none;
}

.home-hero .container,
.hero-section .container,
.learning-hero .container,
.test-hero .container {
    position: relative;
    z-index: 1;
}

.feature-card,
.stat-card,
.word-card,
.test-card,
.package-card,
.learning-card {
    background: rgba(255, 253, 247, 0.94) !important;
    border: 1px solid var(--academy-border) !important;
    box-shadow: var(--academy-shadow-soft) !important;
    border-radius: 18px !important;
}

.feature-card::before,
.stat-card::before,
.word-card::before,
.test-card::before,
.package-card::before,
.learning-card::before {
    background: linear-gradient(90deg, var(--academy-primary), var(--academy-green)) !important;
}

.section-badge,
.hero-badge,
.badge-soft,
.mode-badge {
    background: rgba(243, 229, 204, 0.72) !important;
    color: var(--academy-primary-dark) !important;
    border: 1px solid rgba(139, 94, 52, 0.16) !important;
}

.daily-suggestion {
    margin: -4px 0 18px;
    padding: 12px 16px;
    color: var(--academy-primary-dark);
    background: linear-gradient(135deg, rgba(243, 229, 204, 0.72), rgba(255, 253, 247, 0.92));
    border: 1px solid rgba(139, 94, 52, 0.16);
    border-radius: 16px;
    box-shadow: var(--academy-shadow-soft);
}

.learning-path-guide {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0 24px;
}

.path-guide-item {
    padding: 14px 16px;
    background: rgba(255, 253, 247, 0.9);
    border: 1px solid var(--academy-border);
    border-radius: 16px;
    color: var(--academy-muted);
    box-shadow: var(--academy-shadow-soft);
}

.path-guide-item strong {
    color: var(--academy-primary-dark);
}

.empty-learning-state {
    margin: 28px auto;
    padding: 38px 24px;
    text-align: center;
    background: rgba(255, 253, 247, 0.95);
    border: 1px solid var(--academy-border);
    border-radius: 22px;
    box-shadow: var(--academy-shadow-soft);
}

.empty-learning-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--academy-primary);
    background: rgba(243, 229, 204, 0.72);
    font-size: 1.8rem;
}

.empty-learning-state h3 {
    margin-bottom: 10px;
    font-size: 1.25rem;
}

.empty-learning-state p {
    margin: 0 auto 20px;
    max-width: 520px;
    color: var(--academy-muted);
}

.empty-learning-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.listen-empty-hint {
    margin: 12px 0;
    padding: 12px 14px;
    color: var(--academy-primary-dark);
    background: rgba(243, 229, 204, 0.62);
    border: 1px solid rgba(139, 94, 52, 0.16);
    border-radius: 14px;
}

.progress-section {
    background: rgba(255, 248, 232, 0.72) !important;
    border-radius: 14px;
}

.progress {
    background-color: rgba(139, 94, 52, 0.12) !important;
    border-radius: 999px !important;
}

.modal-header {
    border-bottom-color: rgba(139, 94, 52, 0.12) !important;
}

.modal-footer {
    border-top-color: rgba(139, 94, 52, 0.12) !important;
}

@media (max-width: 768px) {
    .card,
    .glass-card,
    .learning-header,
    .word-learning-card,
    .sentence-display {
        border-radius: 14px !important;
    }

    .learning-path-guide {
        grid-template-columns: 1fr;
    }

    body::before {
        background-size: 28px 28px;
    }
    
    /* 覆盖移动端滚动导航栏 */
    .modern-navbar.scrolled {
        background: linear-gradient(135deg, rgba(95, 63, 35, 0.85) 0%, rgba(139, 94, 52, 0.85) 58%, rgba(73, 107, 79, 0.85) 100%) !important;
        backdrop-filter: blur(25px);
    }
}

/* 覆盖移动端菜单面板 */
.mobile-menu-header {
    background: linear-gradient(135deg, #5f3f23 0%, #8b5e34 58%, #496b4f 100%) !important;
}

.mobile-menu-item:hover {
    background: linear-gradient(135deg, #8b5e34 0%, #5f3f23 100%) !important;
    color: white !important;
}

.mobile-menu-item:hover .mobile-menu-icon {
    color: var(--academy-primary-dark) !important;
}

.mobile-menu-icon {
    color: var(--academy-primary) !important;
}

.mobile-menu-user-info {
    background: linear-gradient(135deg, #5f3f23 0%, #8b5e34 58%, #496b4f 100%) !important;
}

.mobile-menu-logout:hover {
    background: linear-gradient(135deg, #b45309 0%, #8b3d09 100%) !important;
}

/* 覆盖下拉菜单 */
.dropdown-menu-modern .dropdown-item:hover {
    background: linear-gradient(135deg, #8b5e34 0%, #5f3f23 100%) !important;
    color: white !important;
}

/* 覆盖回到顶部按钮 */
.scroll-to-top {
    background: linear-gradient(135deg, var(--academy-primary) 0%, var(--academy-primary-dark) 100%) !important;
}
.scroll-to-top:hover {
    box-shadow: 0 6px 20px rgba(139, 94, 52, 0.4) !important;
}

/* 覆盖Footer */
footer {
    background: linear-gradient(135deg, #fffaf0 0%, #f8efe1 100%) !important;
    border-top: 1px solid rgba(139, 94, 52, 0.1) !important;
}
footer a {
    color: var(--academy-primary) !important;
}
footer a:hover {
    color: var(--academy-primary-dark) !important;
}

/* 修复遮挡和层级问题 */
.modern-navbar {
    z-index: 1040 !important;
}
.announcement-bar-container {
    z-index: 1050 !important;
}
.toast-container {
    z-index: 11000 !important;
}

/* 调整全局背景和其他缺失变量 */
.bg-gradient-secondary,
.bg-gradient-info {
    background: linear-gradient(135deg, var(--academy-primary-soft) 0%, var(--academy-primary) 100%) !important;
}
.text-gradient-primary {
    background: linear-gradient(135deg, var(--academy-primary) 0%, var(--academy-primary-dark) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* 重新定义一些基础按钮颜色，防止site.css覆盖 */
.btn-success {
    background: linear-gradient(135deg, var(--academy-green) 0%, #31523b 100%) !important;
    border-color: var(--academy-green) !important;
}
.btn-warning {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
    border-color: #d97706 !important;
}
.btn-info {
    background: linear-gradient(135deg, var(--academy-primary) 0%, var(--academy-primary-dark) 100%) !important;
    border-color: var(--academy-primary) !important;
}

/* 覆盖Alert提示框颜色 */
.alert-success {
    background: linear-gradient(135deg, rgba(73, 107, 79, 0.1) 0%, rgba(49, 82, 59, 0.1) 100%) !important;
    border-left-color: var(--academy-green) !important;
    color: var(--academy-green) !important;
}
.alert-danger {
    background: linear-gradient(135deg, rgba(180, 83, 9, 0.1) 0%, rgba(139, 61, 9, 0.1) 100%) !important;
    border-left-color: var(--academy-accent) !important;
    color: var(--academy-accent) !important;
}
.alert-warning {
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.1) 0%, rgba(180, 83, 9, 0.1) 100%) !important;
    border-left-color: #d97706 !important;
    color: #b45309 !important;
}
.alert-info {
    background: linear-gradient(135deg, rgba(139, 94, 52, 0.1) 0%, rgba(95, 63, 35, 0.1) 100%) !important;
    border-left-color: var(--academy-primary) !important;
    color: var(--academy-primary-dark) !important;
}

/* 统一旧站点变量，减少各页面紫蓝残留 */
:root {
    --primary-start: var(--academy-primary);
    --primary-end: var(--academy-primary-dark);
    --secondary-start: #d97706;
    --secondary-end: var(--academy-accent);
    --success-start: var(--academy-green);
    --success-end: #31523b;
    --warning-start: #d97706;
    --warning-end: #f2c078;
    --info-start: var(--academy-primary);
    --info-end: var(--academy-green);
    --glass-bg: rgba(255, 253, 247, 0.72);
    --glass-border: rgba(139, 94, 52, 0.16);
    --shadow-sm: 0 2px 8px rgba(86, 64, 38, 0.08);
    --shadow-md: 0 4px 16px rgba(86, 64, 38, 0.1);
    --shadow-lg: 0 8px 32px rgba(86, 64, 38, 0.12);
    --shadow-xl: 0 20px 60px rgba(86, 64, 38, 0.15);
}

::selection {
    color: #fff8e8;
    background: var(--academy-primary);
}

::-webkit-scrollbar-track {
    background: #f5ead9 !important;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--academy-primary) 0%, var(--academy-primary-dark) 100%) !important;
    border-color: #f5ead9 !important;
}

html {
    scrollbar-color: var(--academy-primary) #f5ead9 !important;
}

/* 统一常见页面头图和操作区 */
.page-header,
.header-section,
.hero-header,
.dashboard-header,
.history-header,
.shop-header,
.points-header,
.vip-header,
.test-header,
.result-header,
.racing-header,
.invitation-header,
.privacy-header,
.membership-hero,
.search-header,
.words-header,
.review-header,
.progress-header {
    color: #fff8e8 !important;
    background: linear-gradient(135deg, rgba(95, 63, 35, 0.96) 0%, rgba(139, 94, 52, 0.94) 58%, rgba(73, 107, 79, 0.94) 100%) !important;
    border: 1px solid rgba(255, 247, 231, 0.18) !important;
    box-shadow: 0 14px 36px rgba(86, 64, 38, 0.18) !important;
}

.page-header h1,
.header-section h1,
.hero-header h1,
.dashboard-header h1,
.history-header h1,
.shop-header h1,
.points-header h1,
.vip-header h1,
.test-header h1,
.result-header h1,
.racing-header h1,
.invitation-header h1,
.privacy-header h1,
.membership-hero h1,
.search-header h1,
.words-header h1,
.review-header h1,
.progress-header h1,
.page-header .header-title,
.page-header .header-subtitle {
    color: #fff8e8 !important;
}

.header-icon,
.stat-icon,
.feature-icon,
.category-icon,
.word-icon,
.empty-icon,
.result-icon,
.search-icon,
.points-icon,
.vip-icon,
.step-icon,
.rank-icon {
    color: var(--academy-primary) !important;
    background: rgba(243, 229, 204, 0.78) !important;
    border: 1px solid rgba(139, 94, 52, 0.16) !important;
    box-shadow: var(--academy-shadow-soft) !important;
}

/* 统一卡片、列表、筛选面板 */
.controls-section,
.stats-section,
.filter-section,
.search-section,
.content-section,
.history-card,
.result-card,
.points-card,
.reward-card,
.shop-card,
.vip-card,
.test-option-card,
.grade-card,
.word-detail-card,
.progress-card,
.invitation-card,
.privacy-card,
.ranking-card,
.leaderboard-card,
.game-card,
.member-card {
    background: rgba(255, 253, 247, 0.94) !important;
    border: 1px solid var(--academy-border) !important;
    box-shadow: var(--academy-shadow-soft) !important;
}

/* 统一按钮和标签状态 */
.btn-back,
.btn-start,
.start-btn,
.start-test-btn,
.action-btn,
.primary-action,
.submit-btn,
.exchange-btn,
.redeem-btn,
.search-submit,
.grade-btn.active,
.tab-btn.active,
.filter-btn.active,
.category-btn.active,
.mode-btn.active,
.pagination .page-item.active .page-link {
    color: #fff8e8 !important;
    background: linear-gradient(135deg, var(--academy-primary) 0%, var(--academy-primary-dark) 100%) !important;
    border-color: var(--academy-primary) !important;
    box-shadow: 0 8px 20px rgba(139, 94, 52, 0.22) !important;
}

.btn-back:hover,
.btn-start:hover,
.start-btn:hover,
.start-test-btn:hover,
.action-btn:hover,
.primary-action:hover,
.submit-btn:hover,
.exchange-btn:hover,
.redeem-btn:hover,
.search-submit:hover {
    color: #fff !important;
    filter: brightness(1.04);
}

.grade-btn,
.tab-btn,
.filter-btn,
.category-btn,
.mode-btn,
.pagination .page-link {
    color: var(--academy-primary) !important;
    background: rgba(255, 253, 247, 0.86) !important;
    border-color: rgba(139, 94, 52, 0.24) !important;
}

.badge,
.status-badge,
.type-badge,
.category-badge,
.grade-badge,
.points-badge,
.count-badge {
    border-color: rgba(139, 94, 52, 0.16) !important;
}

/* 覆盖常见旧色内联渐变，避免页面局部仍露出紫蓝主题 */
.header-icon[style*="linear-gradient(135deg, #667eea"],
.header-icon[style*="linear-gradient(135deg,#667eea"],
.page-header [style*="linear-gradient(135deg, #667eea"],
.page-header [style*="linear-gradient(135deg,#667eea"],
.hero-header [style*="linear-gradient(135deg, #667eea"],
.hero-header [style*="linear-gradient(135deg,#667eea"],
.privacy-header[style*="linear-gradient(135deg, #667eea"],
.invitation-header[style*="linear-gradient(135deg, #667eea"],
.membership-hero[style*="linear-gradient(135deg, #667eea"] {
    color: #fff8e8 !important;
    background: linear-gradient(135deg, var(--academy-primary) 0%, var(--academy-primary-dark) 100%) !important;
}

.text-gradient-secondary,
.text-gradient-success,
.text-gradient-warning {
    background: linear-gradient(135deg, var(--academy-primary) 0%, var(--academy-accent) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* 移动端层级修复：菜单应高于公告和导航 */
.mobile-menu-overlay {
    z-index: 1080 !important;
}
.mobile-menu-panel {
    background: #fffdf7 !important;
    z-index: 1081 !important;
}

@media (max-width: 991px) {
    body {
        padding-top: calc(64px + var(--announcement-height, 0px));
    }

    .main-content {
        padding-top: 18px;
    }

    .page-header,
    .header-section,
    .hero-header,
    .dashboard-header,
    .history-header,
    .shop-header,
    .points-header,
    .vip-header,
    .test-header,
    .result-header,
    .racing-header,
    .invitation-header,
    .privacy-header,
    .membership-hero,
    .search-header,
    .words-header,
    .review-header,
    .progress-header {
        border-radius: 18px !important;
    }
}