body { background-color: var(--bg-body); color: var(--text-primary); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--text-primary); line-height: var(--leading-tight); }
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

.navbar {
    background: var(--bg-nav) !important;
    min-height: var(--navbar-height);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(8px);
}
.navbar .nav-link, .navbar .navbar-brand { color: var(--text-nav) !important; transition: opacity var(--transition-fast); }
.navbar .nav-link:hover { opacity: 0.85; }
.navbar-brand { font-weight: 800; font-size: 1.25rem; letter-spacing: -0.5px; }
.navbar-dark .navbar-toggler { border-color: rgba(255,255,255,0.15); }

.dropdown-menu { background-color: var(--bg-card); border: 1px solid var(--border-color); box-shadow: var(--shadow-lg); border-radius: var(--radius-lg); padding: var(--spacing-1) 0; }
.dropdown-item { color: var(--text-primary); padding: var(--spacing-2) var(--spacing-4); font-size: var(--text-sm); border-radius: var(--radius-sm); margin: 0 var(--spacing-1); }
.dropdown-item:hover { background-color: var(--bg-hover); color: var(--text-primary); }

.card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-lg);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.sidebar .card:hover { transform: none; }
.card-header {
    background-color: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    font-size: var(--text-base);
    padding: var(--spacing-4) var(--spacing-5);
}
.card-body { padding: var(--spacing-5); }

.list-group-item { background-color: var(--bg-card); border-color: var(--border-color); color: var(--text-primary); padding: var(--spacing-3) var(--spacing-5); transition: background-color var(--transition-fast); }
.list-group-item:hover { background-color: var(--bg-hover); }

a { color: var(--link-color); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--link-hover); }

.text-muted { color: var(--text-secondary) !important; }
.text-secondary { color: var(--text-tertiary) !important; }

.badge { font-weight: 500; padding: 0.25em 0.6em; }
.badge.bg-secondary { background-color: var(--badge-bg) !important; color: var(--badge-text); }

.article-cover { width: 100%; height: 200px; object-fit: cover; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.article-content img { max-width: 100%; height: auto; border-radius: var(--radius-lg); margin: var(--spacing-4) 0; }
.article-content p { line-height: var(--leading-relaxed); margin-bottom: var(--spacing-4); }

.sidebar .card { margin-bottom: var(--spacing-4); }
.sidebar .card-header { font-size: var(--text-sm); }

.tag-cloud .badge { margin: 2px; font-size: var(--text-xs); font-weight: 400; }

.breadcrumb { background: transparent; padding: var(--spacing-3) 0; font-size: var(--text-sm); }

footer {
    background-color: var(--bg-footer) !important;
    color: var(--text-footer);
    font-size: var(--text-sm);
    padding: var(--spacing-12) 0;
    margin-top: var(--spacing-12);
}
footer a { color: var(--text-footer); text-decoration: none; transition: color var(--transition-fast); }
footer a:hover { color: var(--text-footer-hover); }

.btn { font-weight: 600; border-radius: var(--radius-md); transition: all var(--transition-fast); }
.btn-primary { background-color: var(--primary-color); border-color: var(--primary-color); color: var(--text-on-primary); }
.btn-primary:hover, .btn-primary:focus { background-color: var(--primary-hover); border-color: var(--primary-hover); color: var(--text-on-primary); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-primary:active { transform: translateY(0); }
.btn-outline-primary { color: var(--primary-color); border-color: var(--primary-color); }
.btn-outline-primary:hover { background-color: var(--primary-color); border-color: var(--primary-color); color: var(--text-on-primary); }
.btn-outline-secondary { color: var(--text-secondary); border-color: var(--border-color); }
.btn-outline-secondary:hover { background-color: var(--bg-hover); color: var(--text-primary); border-color: var(--text-secondary); }
.btn-sm { padding: var(--spacing-1) var(--spacing-3); font-size: var(--text-sm); }

.form-control, .form-select {
    background-color: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--text-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-control:focus, .form-select:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 0.2rem var(--primary-light);
    background-color: var(--bg-input);
    color: var(--text-primary);
}
.form-control::placeholder { color: var(--text-tertiary); }

.input-group-text {
    background-color: var(--bg-hover);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

.table { color: var(--text-primary); }
.table-striped > tbody > tr:nth-of-type(odd) > * { color: var(--text-primary); }

.modal-content { background-color: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); }
.modal-header { border-bottom: 1px solid var(--border-color); }
.modal-footer { border-top: 1px solid var(--border-color); }

.nav-tabs { border-bottom-color: var(--border-color); }
.nav-tabs .nav-link { color: var(--text-secondary); border: none; padding: var(--spacing-2) var(--spacing-4); }
.nav-tabs .nav-link:hover { color: var(--text-primary); border: none; }
.nav-tabs .nav-link.active { color: var(--primary-color); background: transparent; border-bottom: 2px solid var(--primary-color); font-weight: 600; }

.page-link { background-color: var(--bg-card); color: var(--link-color); border-color: var(--border-color); }
.page-link:hover { background-color: var(--bg-hover); color: var(--link-hover); border-color: var(--border-color); }
.page-item.active .page-link { background-color: var(--primary-color); border-color: var(--primary-color); color: var(--text-on-primary); }
.page-item.disabled .page-link { background-color: var(--bg-card); color: var(--text-tertiary); }

.ad-banner { text-align: center; margin: var(--spacing-3) 0; }
.ad-banner img { max-width: 100%; border-radius: var(--radius-md); }

.comment-thread { margin-left: var(--spacing-6); border-left: 2px solid var(--border-color); padding-left: var(--spacing-4); }

.search-highlight { background-color: var(--highlight-bg); padding: 0 2px; border-radius: var(--radius-xs); }

.blog-carousel { margin-bottom: var(--spacing-6); border-radius: var(--radius-xl); overflow: hidden; }
.blog-carousel .swiper-slide { height: var(--carousel-h-d, 360px); background: var(--bg-active); }
.blog-carousel .swiper-slide img { width: 100%; height: 100%; object-fit: cover; }
.blog-carousel .slide-caption {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
    background: linear-gradient(transparent, rgba(0,0,0,0.65));
    padding: var(--spacing-12) var(--spacing-8) var(--spacing-6);
    text-align: left; border-radius: 0; color: #fff;
}
.blog-carousel .slide-caption h5 { font-size: var(--text-2xl); font-weight: 700; margin-bottom: var(--spacing-1); color: #fff; }
.blog-carousel .slide-caption p { font-size: var(--text-sm); opacity: 0.85; margin-bottom: 0; color: #fff; }
.blog-carousel .swiper-pagination { margin-bottom: var(--spacing-4); }
.blog-carousel .swiper-pagination-bullet { width: 10px; height: 10px; background: rgba(255,255,255,0.6); opacity: 1; }
.blog-carousel .swiper-pagination-bullet-active { background: #fff; }
.blog-carousel .swiper-button-prev, .blog-carousel .swiper-button-next { color: #fff; opacity: 0; transition: opacity var(--transition-base); }
.blog-carousel:hover .swiper-button-prev, .blog-carousel:hover .swiper-button-next { opacity: 1; }

.article-meta { font-size: var(--text-sm); color: var(--text-secondary); }
.article-meta span { margin-right: var(--spacing-3); }

.scroll-top-btn {
    position: fixed; bottom: 30px; right: 30px; z-index: 999;
    background-color: var(--primary-color); color: var(--text-on-primary);
    border-radius: var(--radius-full); width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden;
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
    box-shadow: var(--shadow-lg);
}
.scroll-top-btn.visible { opacity: 1; visibility: visible; }
.scroll-top-btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-xl); }

.theme-switcher { display: inline-flex; gap: 6px; align-items: center; }
.theme-option {
    border-radius: var(--radius-full); width: 32px; height: 32px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid var(--border-color);
    color: var(--text-secondary); transition: all var(--transition-fast);
}
.theme-option:hover { color: var(--text-primary); border-color: var(--text-secondary); background-color: var(--bg-hover); }
.theme-option.active { color: var(--primary-color); border-color: var(--primary-color); background-color: var(--primary-light); }

.article-tag { display: inline-block; color: var(--tag-color); background-color: var(--tag-bg); padding: 2px 8px; border-radius: var(--radius-xs); font-size: var(--text-xs); margin: 0 2px; }

hr { border-color: var(--border-color); opacity: 1; }

::selection { background-color: var(--primary-light); color: var(--text-primary); }

@media (max-width: 767.98px) {
    .blog-carousel .swiper-slide { height: var(--carousel-h-m, 220px); }
    .blog-carousel .slide-caption { padding: var(--spacing-8) var(--spacing-4) var(--spacing-4); }
    .blog-carousel .slide-caption h5 { font-size: var(--text-lg); }
    .blog-carousel .slide-caption p { font-size: var(--text-xs); }
    .article-cover { height: 160px; }
    h1, .h1 { font-size: 1.5rem; }
    h2, .h2 { font-size: 1.3rem; }
    h3, .h3 { font-size: 1.15rem; }
    h4, .h4 { font-size: 1.05rem; }
    .container { padding-left: 0.75rem; padding-right: 0.75rem; }
    .navbar-brand { font-size: 1.15rem; }
    .article-meta { flex-wrap: wrap; gap: 0.5rem; }
    .article-meta span { margin-right: 0.75rem; font-size: 0.8rem; }
    .card-body { padding: 1rem; }
    .comment-thread { margin-left: 0.75rem; padding-left: 0.75rem; }
    footer .row > div { text-align: center !important; }
    footer { font-size: 0.85rem; }
    .breadcrumb { font-size: 0.8rem; }
    .nav-tabs .nav-link { font-size: 0.85rem; padding: 0.4rem 0.75rem; }
    .paid-mask .display-4 { font-size: 2rem; }
}
@media (max-width: 575.98px) {
    .d-flex.flex-wrap.gap-3 { gap: 0.5rem !important; }
    .list-group-item { padding: 0.6rem 0.8rem; font-size: 0.9rem; }
    .scroll-top-btn { bottom: 15px; right: 15px; }
    .col-sm-6 { width: 100%; }
}