/* ========================================
   BitBrowserHub 自定义样式
   品牌色：Indigo (#4F46E5)
   ======================================== */

/* ========== CSS 变量 ========== */
:root {
    --bbh-primary: #4F46E5;
    --bbh-primary-dark: #3730A3;
    --bbh-primary-light: #EEF2FF;
    --bbh-accent: #6366F1;
    --bbh-dark: #0F172A;
    --bbh-dark-card: #1E293B;
    --bbh-dark-text: #E2E8F0;
    --bbh-bg: #ffffff;
    --bbh-bg-secondary: #F8FAFC;
    --bbh-text: #1E293B;
    --bbh-muted: #64748B;
    --bbh-border: #E2E8F0;
    --bbh-radius: 12px;
    --bbh-shadow: 0 2px 8px rgba(0,0,0,0.08);
    --bbh-shadow-hover: 0 8px 25px rgba(0,0,0,0.12);
    --bbh-transition: all 0.3s ease;
}

/* ========== 暗黑模式 ========== */
[data-theme="dark"] {
    --bbh-bg: #0F172A;
    --bbh-bg-secondary: #1E293B;
    --bbh-text: #E2E8F0;
    --bbh-muted: #94A3B8;
    --bbh-border: #334155;
    --bbh-shadow: 0 2px 8px rgba(0,0,0,0.3);
    --bbh-shadow-hover: 0 8px 25px rgba(0,0,0,0.4);
}

/* ========== 全局 ========== */
body {
    background-color: var(--bbh-bg);
    color: var(--bbh-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
    line-height: 1.8;
    transition: background-color 0.3s ease, color 0.3s ease;
}
a { color: var(--bbh-primary); transition: var(--bbh-transition); }
a:hover { color: var(--bbh-primary-dark); }
::selection { background-color: var(--bbh-primary); color: #fff; }

/* ========== 导航栏 ========== */
.bg-bbh-primary { background-color: var(--bbh-primary) !important; }
.navbar.sticky-top { position: fixed !important; top: 0; left: 0; right: 0; z-index: 1030; }
.navbar .nav-link {
    color: rgba(255,255,255,0.85);
    font-size: 0.95rem;
    padding: 0.5rem 0.9rem;
    border-radius: 6px;
    transition: var(--bbh-transition);
}
.navbar .nav-link:hover,
.navbar .nav-link.active { color: #fff; background-color: rgba(255,255,255,0.15); }
.navbar-brand { font-size: 1.25rem; }
#themeToggle {
    width: 36px; height: 36px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; border-radius: 50%; transition: var(--bbh-transition);
}
#themeToggle:hover { background-color: rgba(255,255,255,0.2); transform: rotate(15deg); }

/* ========== Hero ========== */
.hero-section {
    background: linear-gradient(135deg, #4F46E5 0%, #3730A3 50%, #312E81 100%);
    min-height: 70vh;
    position: relative;
    overflow: hidden;
}
.hero-section::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
[data-theme="dark"] .hero-section {
    background: linear-gradient(135deg, #3730A3 0%, #312E81 50%, #1E1B4B 100%);
}

/* ========== 按钮 ========== */
.btn-bbh-primary {
    background-color: var(--bbh-primary); border-color: var(--bbh-primary);
    color: #fff; border-radius: 8px; font-weight: 500; transition: var(--bbh-transition);
}
.btn-bbh-primary:hover {
    background-color: var(--bbh-primary-dark); border-color: var(--bbh-primary-dark);
    color: #fff; transform: translateY(-2px); box-shadow: var(--bbh-shadow-hover);
}
.btn-bbh-accent {
    background-color: #fff; color: var(--bbh-primary); border-radius: 50px;
    font-weight: 600; transition: var(--bbh-transition);
}
.btn-bbh-accent:hover {
    transform: translateY(-3px); box-shadow: 0 8px 30px rgba(0,0,0,0.2); color: var(--bbh-primary-dark);
}
.btn-outline-bbh { border-color: var(--bbh-primary); color: var(--bbh-primary); border-radius: 8px; }
.btn-outline-bbh:hover { background-color: var(--bbh-primary); border-color: var(--bbh-primary); color: #fff; }

/* ========== 区块 ========== */
.bg-bbh-section { background-color: var(--bbh-bg-secondary); }
.text-bbh-muted { color: var(--bbh-muted) !important; }
.text-bbh-primary { color: var(--bbh-primary) !important; }
.border-bbh { border-color: var(--bbh-border) !important; }

/* ========== 卡片 ========== */
.feature-card { border-radius: var(--bbh-radius); transition: var(--bbh-transition); }
.feature-card:hover { background-color: var(--bbh-bg-secondary); transform: translateY(-3px); }
.feature-icon { font-size: 2.5rem; line-height: 1; }
.post-card { border-radius: var(--bbh-radius); overflow: hidden; transition: var(--bbh-transition); }
.post-card:hover { transform: translateY(-5px); box-shadow: var(--bbh-shadow-hover); }
.post-card:hover .card-title { color: var(--bbh-primary) !important; }
.post-list-item { transition: var(--bbh-transition); }
.post-list-item:hover { background-color: var(--bbh-bg-secondary); border-radius: 8px; margin: 0 -12px; padding-left: 12px; padding-right: 12px; }

/* ========== 文章内容 ========== */
.article-content { font-size: 1.05rem; line-height: 2; }
.article-content h2 { font-size: 1.5rem; font-weight: 700; margin-top: 2.5rem; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--bbh-primary); color: var(--bbh-text); }
.article-content h3 { font-size: 1.25rem; font-weight: 600; margin-top: 2rem; margin-bottom: 0.8rem; color: var(--bbh-text); }
.article-content p { margin-bottom: 1.2rem; }
.article-content img { max-width: 100%; height: auto; border-radius: 8px; margin: 1.5rem 0; }
.article-content ul, .article-content ol { padding-left: 1.5rem; margin-bottom: 1.2rem; }
.article-content li { margin-bottom: 0.5rem; }
.article-content blockquote { border-left: 4px solid var(--bbh-primary); padding: 1rem 1.5rem; margin: 1.5rem 0; background-color: var(--bbh-bg-secondary); border-radius: 0 8px 8px 0; color: var(--bbh-muted); }
.article-content code { background-color: var(--bbh-bg-secondary); padding: 2px 6px; border-radius: 4px; font-size: 0.9em; }
.article-content pre { background-color: #1E293B; color: #E2E8F0; padding: 1.5rem; border-radius: 8px; overflow-x: auto; margin: 1.5rem 0; }
.article-content pre code { background: none; padding: 0; color: inherit; }

/* ========== 标签 ========== */
.bg-bbh-tag { background-color: var(--bbh-primary-light) !important; color: var(--bbh-primary) !important; }
[data-theme="dark"] .bg-bbh-tag { background-color: rgba(79, 70, 229, 0.2) !important; }

/* ========== FAQ ========== */
.accordion-button:not(.collapsed) { background-color: var(--bbh-primary-light); color: var(--bbh-primary); font-weight: 600; }
[data-theme="dark"] .accordion-button:not(.collapsed) { background-color: rgba(79, 70, 229, 0.15); color: var(--bbh-primary); }
.accordion-button:focus { box-shadow: 0 0 0 0.2rem rgba(79, 70, 229, 0.25); }
.accordion-button { font-weight: 500; color: var(--bbh-text); }
.accordion-body { line-height: 1.8; }

/* ========== Widget ========== */
.widget-item { border-radius: var(--bbh-radius); overflow: hidden; border: 1px solid var(--bbh-border); }
.widget-item .card-header { background-color: var(--bbh-primary); color: #fff; border-bottom: none; padding: 0.75rem 1rem; }

/* ========== 404 ========== */
.error-404 h1 { font-size: 8rem; line-height: 1; opacity: 0.3; }

/* ========== 面包屑 ========== */
.breadcrumb-item a { color: var(--bbh-primary); }
.breadcrumb-item.active { color: var(--bbh-muted); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--bbh-muted); }

/* ========== 分页 ========== */
.page-link { color: var(--bbh-primary); border-color: var(--bbh-border); }
.page-link:hover { background-color: var(--bbh-primary); border-color: var(--bbh-primary); color: #fff; }
.page-item.active .page-link { background-color: var(--bbh-primary); border-color: var(--bbh-primary); }

/* ========== Footer ========== */
.bg-bbh-dark { background-color: var(--bbh-dark) !important; }
.footer-links li a { color: #94A3B8; transition: var(--bbh-transition); }
.footer-links li a:hover { color: #fff; padding-left: 5px; }

/* ========== 回到顶部 ========== */
#backToTop {
    position: fixed; bottom: 30px; right: 30px; width: 44px; height: 44px;
    background-color: var(--bbh-primary); color: #fff; border: none; border-radius: 50%;
    font-size: 1.2rem; cursor: pointer; opacity: 0; visibility: hidden;
    transition: var(--bbh-transition); z-index: 999; box-shadow: var(--bbh-shadow);
}
#backToTop.show { opacity: 1; visibility: visible; }
#backToTop:hover { transform: translateY(-3px); box-shadow: var(--bbh-shadow-hover); }

/* ========== 响应式 ========== */
@media (max-width: 768px) {
    .hero-section { min-height: 50vh; padding: 3rem 0; }
    .hero-section h1 { font-size: 2rem; }
    .hero-section .lead { font-size: 1rem; }
    .article-content h2 { font-size: 1.3rem; }
    .post-list-item .flex-shrink-0 { display: none; }
    #backToTop { bottom: 20px; right: 20px; width: 38px; height: 38px; }
}
@media (max-width: 576px) {
    .hero-section h1 { font-size: 1.5rem; }
    .hero-section .btn-lg { padding: 0.6rem 1.5rem; font-size: 0.9rem; }
}