/* ============================================================
   丽人梦想秀® · 移动端优化 & 小程序体验
   Mobile-First PWA Edition
   ============================================================ */

/* ── 底部导航栏 (类微信小程序) ── */
.mobile-tab-bar {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 999;
  background: rgba(255,255,255,0.95); backdrop-filter: blur(20px);
  border-top: 1px solid rgba(0,0,0,0.06);
  padding: 6px 0 env(safe-area-inset-bottom, 8px);
}
.mobile-tab-item {
  flex: 1; text-align: center; cursor: pointer;
  padding: 4px 0; transition: all 0.2s;
}
.mobile-tab-icon { font-size: 22px; display: block; margin-bottom: 2px; }
.mobile-tab-label { font-size: 9px; color: var(--ink-light); }
.mobile-tab-item.active .mobile-tab-label { color: #7B2D8E; font-weight: 600; }

/* ── 响应式布局 ── */
@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
    width: 260px; z-index: 1000;
  }
  .sidebar.open { transform: translateX(0); }
  
  .main-content {
    margin-left: 0 !important;
    padding: 16px 12px 100px !important;
  }
  
  .mobile-tab-bar { display: flex; }
  
  .mobile-menu-btn {
    display: flex !important;
    position: fixed; top: 12px; left: 12px; z-index: 101;
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255,255,255,0.8); border: 1px solid rgba(0,0,0,0.08);
    align-items: center; justify-content: center; font-size: 18px;
    cursor: pointer; backdrop-filter: blur(12px);
  }
  
  .col-md-3, .col-md-4, .col-md-6 { width: 50% !important; flex: 0 0 50% !important; }
  .col-md-3 { width: 50% !important; }
  
  .hero-gradient { padding: 24px 16px !important; border-radius: 20px !important; }
  .hero-gradient h1 { font-size: 20px !important; }
  
  .card-glass, .card-stat { border-radius: 14px !important; }
  
  .row.g-3 { --gap: 8px; }
  
  #ai-chat-btn { bottom: 80px !important; right: 12px !important; }
  #ai-chat-box { bottom: 150px !important; right: 8px !important; width: calc(100vw - 16px) !important; max-width: 380px !important; }
  
  input, select, textarea, .form-control { font-size: 16px !important; }
}

@media (max-width: 480px) {
  .col-md-3, .col-md-4, .col-md-6 { width: 100% !important; flex: 0 0 100% !important; }
  .col-6 { width: 50% !important; flex: 0 0 50% !important; }
  .main-content { padding: 12px 8px 100px !important; }
  h1 { font-size: 18px !important; }
  h5 { font-size: 14px !important; }
}

/* ── 移动端遮罩 ── */
#mobile-overlay {
  position: fixed; inset: 0; z-index: 99;
  background: rgba(0,0,0,0.5);
}

/* ── 下拉刷新提示 ── */
.pull-indicator {
  text-align: center; padding: 30px 0; color: var(--ink-light);
  font-size: 12px; display: none;
}