/* ========================================
   点我98 响应式样式
   ======================================== */

/* 平板 < 992px */
@media (max-width: 991px) {
    .layout { flex-direction: column; }
    .sidebar { width: 100%; }
    .footer-widgets { grid-template-columns: repeat(2, 1fr); }
    .article-cover { width: 160px; height: 105px; }
    .logo a { font-size: 20px; }
    .user-bar { gap: 8px; font-size: 13px; }
}

/* 手机 < 768px */
@media (max-width: 767px) {
    .site-header .container { height: 56px; }
    .main-nav { display: none; }
    .menu-toggle { display: flex; }
    /* 移动端菜单展开 */
    .main-nav.open {
        display: block; position: absolute; top: 56px; left: 0; right: 0;
        background: var(--white); box-shadow: 0 4px 12px rgba(0,0,0,.08); padding: 10px;
    }
    .main-nav.open ul { flex-direction: column; gap: 0; }
    .main-nav.open a { padding: 12px; border-radius: 0; border-bottom: 1px solid var(--border); }
    .user-bar .hide-mobile { display: none; }

    .container { padding: 0 12px; }
    .layout { margin: 12px auto; padding: 0 12px; gap: 12px; }
    .card { padding: 14px; margin-bottom: 12px; border-radius: 8px; }
    .card-title { font-size: 16px; }

    .article-item { flex-direction: column; gap: 10px; }
    .article-cover { width: 100%; height: 180px; }
    .article-title { font-size: 16px; }
    .article-meta { flex-wrap: wrap; gap: 8px; font-size: 12px; }

    .article-detail h1 { font-size: 20px; }
    .article-detail .content { font-size: 15px; }

    .footer-widgets { grid-template-columns: 1fr; gap: 20px; padding-bottom: 20px; }
    .footer-widgets h4 { margin-bottom: 10px; }
    .site-footer { padding-top: 30px; }

    .btn { padding: 10px 16px; }
    .pagination { flex-wrap: wrap; }
}

/* 小屏手机 < 480px */
@media (max-width: 479px) {
    body { font-size: 14px; }
    .logo a { font-size: 18px; }
    .logo img { height: 32px; }
    .article-detail h1 { font-size: 18px; }
    .pay-box .price { font-size: 26px; }
    .pay-box { padding: 20px 14px; }
}