/* ============================================
   天天发圈 - Responsive Breakpoints
   适配：电脑、手机、微信内置浏览器、抖音内置浏览器
   ============================================ */

/* ===== Tablet (768px - 1023px) ===== */
@media (max-width: 1023px) {
    :root { --sidebar-width: 0px; --sidebar-collapsed: 0px; }

    .sidebar {
        transform: translateX(-100%);
        width: 260px;
        transition: transform 0.3s ease;
    }
    .sidebar.open { transform: translateX(0); }
    body.sidebar-collapsed .sidebar { width: 260px; transform: translateX(-100%); }
    body.sidebar-collapsed .sidebar.open { transform: translateX(0); }

    .sidebar-backdrop { display: none; }
    .sidebar-backdrop.active { display: block; }

    .main-wrapper { margin-left: 0 !important; }

    .mobile-menu-btn { display: flex; }
    .topbar-info { display: none; }
    .topbar-brand .topbar-name { display: none; }
    .topbar-slogan { display: none; }

    .card-grid-3, .card-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .stats-row { grid-template-columns: repeat(3, 1fr); }
    .membership-grid { grid-template-columns: repeat(2, 1fr); }

    .content-area { padding: 16px; }
    .section-title { font-size: 20px; }

    .main-wrapper { padding-bottom: 60px; }
}

/* ===== Visitor Bar Responsive ===== */
@media (max-width: 1023px) {
    .visitor-bar { gap: 24px; padding: 14px 16px; }
    .visitor-bar strong { font-size: 16px; }
}

/* ===== Mobile (< 768px) ===== */
@media (max-width: 767px) {
    .visitor-bar {
        gap: 16px; padding: 12px 14px;
        flex-wrap: wrap; justify-content: space-around;
    }
    .visitor-bar strong { font-size: 15px; }
    .visitor-bar .vb-label { font-size: 11px; }
    .visitor-bar .vb-icon { font-size: 18px; }
    .visitor-bar .vb-divider { display: none; }

    .card-grid-2, .card-grid-3, .card-grid-4 { grid-template-columns: 1fr; }
    .stats-row { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .membership-grid { grid-template-columns: 1fr; }

    .content-area { padding: 12px; }
    .section-title { font-size: 18px; }
    .section-subtitle { font-size: 13px; }

    .topbar { padding: 0 12px; }
    .topbar-info { display: none; }
    .topbar-brand .topbar-name { display: none; }
    .topbar-slogan { display: none; }

    .breadcrumb { padding: 8px 12px; font-size: 12px; }

    .search-filter-bar { flex-direction: column; padding: 12px; }
    .search-input-wrap { width: 100%; }
    .filter-tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
    .filter-tabs::-webkit-scrollbar { display: none; }

    .home-hero { padding: 24px 16px; }
    .home-hero h1 { font-size: 22px; }

    .tool-card { padding: 14px; }
    .tool-card-name { font-size: 14px; }
    .tool-card-desc { font-size: 12px; }
    .tool-card-actions { flex-wrap: wrap; }
    .tool-card-actions .btn { flex: 1; min-width: calc(50% - 4px); font-size: 12px; padding: 8px 10px; }

    .modal-container { max-width: 95vw; max-height: 90vh; }
    .modal-body { padding: 14px; }
    .modal-footer { flex-wrap: wrap; }
    .modal-footer .btn { flex: 1; }

    .pricing-tabs { flex-direction: column; }
    .pricing-tab { text-align: left; display: flex; justify-content: space-between; align-items: center; }

    .message-form-row { flex-direction: column; }

    .site-footer { padding: 20px 12px; }

    .float-cs-widget { bottom: 76px; right: 12px; }
    .float-cs-panel { width: 280px; right: 0; }
    .float-cs-toggle { width: 48px; height: 48px; }

    .feature-grid { grid-template-columns: 1fr; }
    .auth-code-form { padding: 20px; }
    .stat-card { padding: 14px; }
    .stat-card-value { font-size: 22px; }
    .stat-card-label { font-size: 11px; }
}

/* ===== Small Mobile (< 375px) ===== */
@media (max-width: 374px) {
    .content-area { padding: 8px; }
    .section-title { font-size: 16px; }
    .tool-card { padding: 10px; gap: 8px; }
    .tool-card-header { gap: 8px; }
    .tool-card-icon { width: 36px; height: 36px; font-size: 20px; }
    .btn { font-size: 12px; padding: 8px 14px; }
}

/* ===== WeChat In-App Browser ===== */
html.is-wechat .topbar { padding-top: 0; }
html.is-wechat .float-cs-qrcode .qr-tip { display: none; }
html.is-wechat .float-cs-widget { bottom: 20px; }

/* ===== Douyin In-App Browser ===== */
html.is-douyin .float-cs-widget { bottom: 60px; }
html.is-douyin .topbar { position: relative; }

/* ===== Desktop Large (> 1400px) ===== */
@media (min-width: 1400px) {
    .content-area { max-width: 1300px; }
    .card-grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* ===== Print ===== */
@media print {
    .sidebar, .topbar, .float-cs-widget, .sidebar-backdrop, .breadcrumb, .site-footer { display: none !important; }
    .main-wrapper { margin-left: 0 !important; }
    .content-area { max-width: 100%; padding: 0; }
}