/* ═══════════════════════════════════════════════════════════
   萌宠百科 PetPedia - 自定义样式表
   修复：移除无效的 Tailwind @import（改用 HTML script 加载）
         v2.3 新增：暗色模式支持
   ═══════════════════════════════════════════════════════════ */

:root {
    --color-primary: #f59e0b;
    --color-primary-dark: #d97706;
}

/* ── 暗色模式支持（v2.3 新增）──────────────────────── */
@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: #0f172a;
        --color-surface: #1e293b;
        --color-text: #f1f5f9;
        --color-text-secondary: #94a3b8;
        --color-border: #334155;
        --color-primary: #fbbf24;
        --color-primary-dark: #f59e0b;
    }

    body {
        background-color: var(--color-bg) !important;
        color: var(--color-text) !important;
    }

    /* 覆盖 Tailwind 的 bg-gray-50 */
    .bg-gray-50 {
        background-color: var(--color-bg) !important;
    }

    .bg-white {
        background-color: var(--color-surface) !important;
    }

    .text-gray-900 {
        color: var(--color-text) !important;
    }

    .text-gray-800 {
        color: var(--color-text) !important;
    }

    .text-gray-600 {
        color: var(--color-text-secondary) !important;
    }

    .text-gray-500 {
        color: var(--color-text-secondary) !important;
    }

    .border-gray-100 {
        border-color: var(--color-border) !important;
    }

    .border-gray-200 {
        border-color: var(--color-border) !important;
    }

    /* 知识文章正文 */
    .prose-gray {
        color: var(--color-text) !important;
    }

    .prose-gray h1,
    .prose-gray h2,
    .prose-gray h3,
    .prose-gray h4 {
        color: var(--color-text) !important;
    }

    .prose-gray p {
        color: var(--color-text-secondary) !important;
    }

    /* 页脚 */
    footer.bg-gray-800 {
        background-color: #020617 !important;
    }

    /* 广告容器 */
    .ad-container {
        background-color: var(--color-surface) !important;
    }

    /* 选中高亮 */
    ::selection {
        background-color: #78350f;
        color: #fef3c7;
    }

    /* 滚动条 */
    ::-webkit-scrollbar-thumb {
        background: #475569;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: #64748b;
    }

    /* 打印样式保持浅色 */
    @media print {
        body {
            background: #fff !important;
            color: #000 !important;
        }
    }
}

/* ── 工具类 ──────────────────────────────────────── */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.sr-only:focus,
.sr-only.focus\:not-sr-only:focus {
    position: static;
    width: auto;
    height: auto;
    padding: inherit;
    margin: inherit;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* ── 图片懒加载 ──────────────────────────────────── */
img[loading="lazy"] {
    transition: opacity 0.3s ease;
}

/* ── 广告容器 ──────────────────────────────────────── */
.ad-container {
    text-align: center;
    overflow: hidden;
    max-width: 100%;
}

.ad-container ins {
    display: inline-block !important;
}

/* ── 滚动条 ──────────────────────────────────────── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* ── 选中高亮 ──────────────────────────────────────── */
::selection {
    background-color: #fef3c7;
    color: #92400e;
}

/* ── 对比表格赢家高亮 ──────────────────────────────── */
.compare-winner {
    background-color: #fffbeb;
}

/* ── 响应式 ──────────────────────────────────────── */
@media (max-width: 640px) {
    .ad-container ins {
        width: 100% !important;
        height: auto !important;
    }
}

/* ── 打印 ──────────────────────────────────────── */
@media print {
    header, footer, .ad-container, #lang-switcher, nav { display: none !important; }
    body { font-size: 12pt; color: #000; background: #fff; }
    a { color: #000; text-decoration: underline; }
}

/* ── 动画 ──────────────────────────────────────── */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up {
    animation: fadeInUp 0.5s ease-out forwards;
}