/* ===== Shared Styles for All Sub-Pages ===== */

/* Animated Background Blobs */
.bg-blobs {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.bg-blob {
  position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.25;
  animation: blobFloat 20s ease-in-out infinite;
}
.bg-blob:nth-child(1) { width: 350px; height: 350px; background: #F8BBD0; top: -10%; left: -5%; animation-delay: 0s; }
.bg-blob:nth-child(2) { width: 300px; height: 300px; background: #FFE0B2; top: 40%; right: -8%; animation-delay: -7s; }
.bg-blob:nth-child(3) { width: 280px; height: 280px; background: #F8BBD0; bottom: -5%; left: 30%; animation-delay: -14s; }
@keyframes blobFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(30px, -40px) scale(1.1); }
  50% { transform: translate(-20px, 20px) scale(0.95); }
  75% { transform: translate(15px, 30px) scale(1.05); }
}

/* Floating Emoji Particles */
.emoji-particles {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.emoji-particle {
  position: absolute; font-size: 1.4rem; opacity: 0;
  animation: emojiDrift linear infinite;
}
@keyframes emojiDrift {
  0% { opacity: 0; transform: translateY(100vh) rotate(0deg); }
  10% { opacity: 0.4; }
  90% { opacity: 0.4; }
  100% { opacity: 0; transform: translateY(-10vh) rotate(360deg); }
}

/* Scroll Reveal Animation */
.reveal {
  opacity: 0; transform: translateY(24px);
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal.stagger-1 { transition-delay: 0.05s; }
.reveal.stagger-2 { transition-delay: 0.1s; }
.reveal.stagger-3 { transition-delay: 0.15s; }
.reveal.stagger-4 { transition-delay: 0.2s; }
.reveal.stagger-5 { transition-delay: 0.25s; }

/* reveal-up variant (首页用) */
.reveal-up {
  opacity: 0; transform: translateY(30px);
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.reveal-up.visible { opacity: 1; transform: translateY(0); }

/* Fun hover pop effect for cards */
.pop-hover {
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pop-hover:hover {
  transform: translateY(-4px) scale(1.02);
}
.pop-hover:active {
  transform: scale(0.97);
}

/* Ripple effect */
.ripple-container { position: relative; overflow: hidden; }
.ripple {
  position: absolute; border-radius: 50%; background: rgba(233,30,99,0.15);
  transform: scale(0); animation: rippleAnim 0.6s linear; pointer-events: none;
}
@keyframes rippleAnim { to { transform: scale(4); opacity: 0; } }

/* Pulse glow for important elements */
.pulse-glow {
  animation: pulseGlow 2s ease-in-out infinite;
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(233,30,99,0.4); }
  50% { box-shadow: 0 0 20px 4px rgba(233,30,99,0.2); }
}

/* Wiggle animation for attention */
.wiggle {
  animation: wiggle 2.5s ease-in-out infinite;
}
@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  15% { transform: rotate(5deg); }
  30% { transform: rotate(-5deg); }
  45% { transform: rotate(3deg); }
  60% { transform: rotate(0deg); }
}

/* Bounce-in animation */
@keyframes bounceIn {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

/* Float animation */
@keyframes gentleFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.float-anim { animation: gentleFloat 3s ease-in-out infinite; }

/* Gradient text effect */
.gradient-text {
  background: linear-gradient(135deg, #E91E63, #FF6D00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Shimmer effect for loading/highlighting */
.shimmer {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

/* Glow button */
.glow-btn {
  position: relative; overflow: hidden;
}
.glow-btn::after {
  content: ''; position: absolute; inset: -2px;
  background: linear-gradient(135deg, #E91E63, #FF6D00, #FF4081, #FF6D00);
  background-size: 300% 300%;
  animation: glowRotate 3s ease infinite;
  border-radius: inherit; z-index: -1;
  filter: blur(8px); opacity: .4;
}
@keyframes glowRotate { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

/* Confetti canvas */
#confettiCanvas { position: fixed; inset: 0; z-index: 99998; pointer-events: none; }

/* Toast notification */
.toast-container { position: fixed; top: 70px; left: 50%; transform: translateX(-50%); z-index: 99999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.toast { background: #fff; border-radius: 14px; padding: 14px 20px; box-shadow: 0 4px 24px rgba(0,0,0,0.12); display: flex; align-items: center; gap: 10px; min-width: 260px; max-width: 90vw; animation: toastIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: auto; border-left: 4px solid #E91E63; }
.toast.success { border-left-color: #2E7D32; }
.toast-icon { font-size: 1.2rem; flex-shrink: 0; }
.toast-text { flex: 1; font-size: 0.88rem; color: #1A1A1A; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-12px) scale(0.9); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* Number counter animation */
.count-up { display: inline-block; }

/* Progress bar animation */
.progress-animated .progress-fill {
  animation: progressGrow 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes progressGrow { from { width: 0%; } }

/* ===== Page Header (统一内页顶栏) ===== */
.page-header {
  background: linear-gradient(135deg, #E91E63, #FF6D00);
  color: #fff;
  padding: 18px 16px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 12px rgba(233,30,99,.12);
}
.page-header h1 { font-size: 1.15rem; font-weight: 800; }
.page-header p { font-size: .78rem; opacity: .9; margin-top: 2px; }
.page-header .header-right { font-size: .8rem; color: rgba(255,255,255,.85); text-decoration: none; font-weight: 600; }
.page-header .back-btn {
  width: 36px; height: 36px;
  border-radius: 12px;
  background: rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
  color: #fff; text-decoration: none;
  font-size: 1rem;
  transition: all .25s cubic-bezier(0.34,1.56,0.64,1);
  flex-shrink: 0;
  backdrop-filter: blur(4px);
}
.page-header .back-btn:hover { background: rgba(255,255,255,.35); transform: scale(1.08); }
.page-header .back-btn:active { background: rgba(255,255,255,.35); transform: scale(0.95); }

/* ===== 底部Tab导航 (统一) ===== */
.tab-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  display: flex; justify-content: space-around; align-items: center;
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
  background: rgba(255,250,250,.92);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid rgba(233,30,99,.06);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.04);
}
.tab-bar a {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 4px 14px; font-size: .62rem; color: #bbb;
  text-decoration: none; transition: all .25s cubic-bezier(0.34,1.56,0.64,1);
  border-radius: 12px;
}
.tab-bar a:active { transform: scale(0.9); }
.tab-bar a.active { color: #E91E63; font-weight: 800; background: rgba(233,30,99,0.06); }
.tab-bar a .tab-icon { font-size: 1.3rem; transition: transform .25s cubic-bezier(0.34,1.56,0.64,1); }
.tab-bar a.active .tab-icon { transform: translateY(-2px) scale(1.15); }

/* ===== 通用卡片 ===== */
.card {
  background: #fff; border-radius: 16px;
  box-shadow: 0 2px 16px rgba(233,30,99,.06);
  border: 1px solid rgba(0,0,0,.02);
  overflow: hidden;
}
.card-body { padding: 16px 18px; }

/* ===== 通用区域标题 ===== */
.section-head {
  padding: 0 20px; margin-bottom: 14px;
  display: flex; align-items: center; justify-content: space-between;
}
.section-head .left { display: flex; align-items: center; gap: 8px; }
.section-head .emoji { font-size: 1.1rem; }
.section-head .title { font-size: .92rem; font-weight: 800; color: #1A1A2E; }
.section-head .more { font-size: .72rem; color: #8E8E9A; text-decoration: none; font-weight: 600; }

/* ===== 通用Tab ===== */
.tab-nav {
  display: flex; background: #fff;
  border-bottom: 1px solid rgba(233,30,99,.06);
  position: sticky; top: 52px; z-index: 99;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.tab-nav::-webkit-scrollbar { display: none; }
.tab-nav-item {
  flex: 1; min-width: 0; padding: 12px 4px;
  text-align: center; font-size: .82rem; font-weight: 600;
  color: #8E8E9A; border-bottom: 3px solid transparent;
  cursor: pointer; transition: all .25s; white-space: nowrap;
}
.tab-nav-item.active { color: #E91E63; border-bottom-color: #E91E63; }

/* ===== Dark Mode ===== */
html.dark { --bg: #1A1A2E; --card-bg: #2A2A3E; --text: #F0F0F5; --text-muted: #8E8E9A; --border: rgba(255,255,255,.06); }
html.dark body { background: var(--bg); color: var(--text); }
html.dark .card, html.dark .card-body { background: var(--card-bg); color: var(--text); border-color: var(--border); }
html.dark .section-head .title { color: var(--text); }
html.dark .page-header { background: linear-gradient(135deg, #C2185B, #E65100); }
html.dark .tab-bar { background: rgba(26,26,46,.94); border-top-color: var(--border); }
html.dark .tab-bar a { color: #666; }
html.dark .tab-bar a.active { color: #FF4081; background: rgba(255,64,129,.1); }
html.dark .tab-nav { background: var(--card-bg); border-bottom-color: var(--border); }
html.dark .tab-nav-item { color: var(--text-muted); }
html.dark .tab-nav-item.active { color: #FF4081; border-bottom-color: #FF4081; }
html.dark .progress-track { background: rgba(255,255,255,.08); }
html.dark .toast { background: var(--card-bg); color: var(--text); box-shadow: 0 4px 24px rgba(0,0,0,.3); }
html.dark .toast-text { color: var(--text); }
html.dark .loading-screen { background: #1A1A2E; }
html.dark .loading-screen .loader-text { color: #F0F0F5; }
html.dark input, html.dark textarea, html.dark select { background: var(--card-bg); color: var(--text); border-color: var(--border); }
html.dark .companion-toast-bubble { background: var(--card-bg); color: var(--text); box-shadow: 0 4px 20px rgba(0,0,0,.3); }

/* ===== 页面过渡动画 ===== */
.page-transition-overlay {
  position: fixed; inset: 0; z-index: 99999; pointer-events: none;
  background: linear-gradient(135deg, #E91E63, #FF6D00);
  opacity: 0; transition: opacity 0.25s ease;
}
.page-transition-overlay.active {
  opacity: 1; pointer-events: all;
}
.page-transition-overlay.fade-out {
  opacity: 0; pointer-events: none; transition: opacity 0.3s ease 0.1s;
}

/* ===== 页面入场动画 ===== */
@keyframes pageSlideIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
main, .page-content, #app {
  animation: pageSlideIn 0.35s ease-out;
}

/* ===== 卡片悬浮效果 ===== */
.card-hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(233,30,99,0.12);
}

/* ===== 学伴头像气泡 ===== */
.companion-avatar-float {
  position: fixed; bottom: 90px; left: 16px; z-index: 100;
  width: 44px; height: 44px; border-radius: 50%;
  border: 2.5px solid #E91E63; background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 12px rgba(233,30,99,0.25);
  cursor: pointer; transition: transform 0.2s ease;
  animation: companionFloat 3s ease-in-out infinite;
}
.companion-avatar-float:hover { transform: scale(1.12); }
.companion-avatar-float img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.companion-avatar-bubble {
  position: absolute; bottom: 50px; left: 50px;
  background: #fff; border-radius: 12px; padding: 8px 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1); font-size: 13px; color: #333;
  max-width: 160px; white-space: normal;
  animation: bubblePop 0.3s ease-out;
}
.companion-avatar-bubble::after {
  content: ''; position: absolute; bottom: -6px; left: 16px;
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-top: 6px solid #fff;
}
html.dark .companion-avatar-float { background: var(--card-bg); border-color: #FF4081; }
html.dark .companion-avatar-bubble { background: var(--card-bg); color: var(--text); }
html.dark .companion-avatar-bubble::after { border-top-color: var(--card-bg); }

@keyframes companionFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes bubblePop {
  from { opacity: 0; transform: scale(0.8) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ===== 通用进度条 ===== */
.progress-track {
  height: 8px; background: #f5e6ea; border-radius: 4px; overflow: hidden;
}
.progress-fill {
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, #E91E63, #FF6D00);
  transition: width .5s cubic-bezier(.34,1.56,.64,1);
}

/* ===== 统一顶部导航栏 ===== */
.app-top-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  height: 52px; display: flex; align-items: center; gap: 10px;
  padding: 0 12px; max-width: 480px; margin: 0 auto;
  background: rgba(255,250,250,.92); backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(233,30,99,.06);
  transition: background .3s, border-color .3s;
}
.atb-back {
  width: 34px; height: 34px; border-radius: 10px; border: none;
  background: rgba(233,30,99,.08); color: #E91E63;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .2s; flex-shrink: 0;
}
.atb-back:active { transform: scale(.92); background: rgba(233,30,99,.15); }
.atb-icon { font-size: 1.3rem; flex-shrink: 0; width: 34px; text-align: center; }
.atb-center { flex: 1; display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.atb-title {
  font-size: 1rem; font-weight: 800; color: var(--text, #333);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin: 0; line-height: 1.2;
}
.atb-section {
  font-size: .65rem; font-weight: 600;
  padding: 2px 8px; border-radius: 6px; white-space: nowrap; flex-shrink: 0;
  background: currentColor; background: rgba(233,30,99,.06);
}
.atb-action {
  width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: #888; text-decoration: none; transition: all .2s; flex-shrink: 0;
}
.atb-action:active { transform: scale(.92); color: #E91E63; }

/* ===== 分区子导航 ===== */
.app-sub-tabs {
  position: fixed; top: 52px; left: 0; right: 0; z-index: 899;
  display: flex; gap: 4px; padding: 6px 12px 8px;
  max-width: 480px; margin: 0 auto;
  background: rgba(255,250,250,.92); backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(233,30,99,.04);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.app-sub-tabs::-webkit-scrollbar { display: none; }
.sub-tab {
  display: flex; align-items: center; gap: 4px;
  padding: 6px 14px; border-radius: 20px;
  text-decoration: none; font-size: .78rem; font-weight: 500;
  color: #888; background: #f5f5f5;
  white-space: nowrap; transition: all .25s cubic-bezier(.34,1.56,.64,1);
  flex-shrink: 0;
}
.sub-tab.active {
  background: linear-gradient(135deg, #E91E63, #FF6D00);
  color: #fff; font-weight: 700;
  box-shadow: 0 2px 10px rgba(233,30,99,.25);
}
.sub-tab:not(.active):active { transform: scale(.95); background: #eee; }
.sub-tab-icon { font-size: .85rem; }
.sub-tab-label { line-height: 1; }

/* ===== 底部导航栏 (重构版) ===== */
.tab-bar.shared-bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;
  display: flex; justify-content: space-around; align-items: center;
  padding: 2px 0 calc(4px + env(safe-area-inset-bottom));
  max-width: 480px; margin: 0 auto; height: 62px;
  background: rgba(255,255,255,.96); backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(0,0,0,.04);
  box-shadow: 0 -1px 16px rgba(233,30,99,.04);
  transition: background .3s;
}
.tab-item {
  display: flex; flex-direction: column; align-items: center;
  text-decoration: none; padding: 4px 0;
  color: #999; font-size: .6rem; gap: 2px;
  transition: all .25s cubic-bezier(.34,1.56,.64,1);
  position: relative; min-width: 44px;
  background: none; border: none; cursor: pointer;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}
.tab-item.active { color: #E91E63; }
.tab-item.active .tab-icon { transform: scale(1.15); }
.tab-item.active .tab-label { font-weight: 700; }
.tab-item:active:not(.tab-more-btn) { transform: scale(.9); }
.tab-icon {
  font-size: 1.25rem; transition: transform .25s cubic-bezier(.34,1.56,.64,1);
  line-height: 1;
}
.tab-label { font-weight: 500; line-height: 1.2; }
.tab-indicator {
  position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  width: 20px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, #E91E63, #FF6D00);
}
.tab-more-btn { color: #999; }

/* ===== 更多面板 (重构版) ===== */
.more-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,.35); opacity: 0;
  pointer-events: none; transition: opacity .3s;
}
.more-overlay.open { opacity: 1; pointer-events: auto; }
.more-panel {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 2001;
  max-width: 480px; margin: 0 auto; max-height: 72vh;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: #fff; border-radius: 24px 24px 0 0;
  padding: 20px 16px calc(24px + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
.more-panel.open { transform: translateY(0); }
.mp-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px;
}
.mp-title { font-size: 1.05rem; font-weight: 800; color: #E91E63; }
.mp-close {
  width: 32px; height: 32px; border-radius: 50%;
  background: #f5f5f5; border: none; font-size: 1rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.mp-section { margin-bottom: 14px; }
.mp-section-title {
  font-size: .78rem; font-weight: 700; color: #666;
  margin-bottom: 8px; padding-left: 2px;
}
.mp-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.mp-item {
  display: flex; flex-direction: column; align-items: center;
  text-decoration: none; padding: 10px 4px; border-radius: 14px;
  background: #fafafa; transition: all .2s; gap: 4px;
}
.mp-item:active { transform: scale(.95); background: #f0f0f0; }
.mp-item.current {
  background: rgba(233,30,99,.08);
  border: 1.5px solid rgba(233,30,99,.2);
}
.mp-item-icon { font-size: 1.3rem; }
.mp-item-label {
  font-size: .65rem; color: #555; font-weight: 500;
  white-space: nowrap;
}
.mp-item.current .mp-item-label { color: #E91E63; font-weight: 700; }
.mp-actions {
  display: flex; gap: 8px; margin-top: 8px;
  padding-top: 12px; border-top: 1px solid #f0f0f0;
}
.mp-action-btn {
  flex: 1; display: flex; align-items: center; justify-content: center;
  gap: 6px; padding: 12px; border-radius: 14px;
  text-decoration: none; font-size: .8rem; font-weight: 700;
}
.mp-action-primary {
  background: linear-gradient(135deg, #E91E63, #FF6D00); color: #fff;
  box-shadow: 0 4px 16px rgba(233,30,99,.25);
}
.mp-action-secondary {
  background: linear-gradient(135deg, #4CAF50, #66BB6A); color: #fff;
  box-shadow: 0 4px 16px rgba(76,175,80,.25);
}

/* ===== 桌面端响应式框架 ===== */
/* 移动优先：默认单列，桌面端自动双栏 */

/* --- 全局容器 --- */
.page-wrap {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  position: relative;
}

/* --- 通用响应式断点 --- */
@media (min-width: 768px) {
  /* 页面容器：桌面端宽屏布局 */
  .page-wrap {
    max-width: 1200px;
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 0;
  }

  /* 左侧侧栏（桌面端自动显示） */
  .page-wrap::before {
    content: '';
    display: block;
  }
  .desktop-sidebar {
    display: block !important;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    background: rgba(255,250,250,.97);
    border-right: 1px solid rgba(233,30,99,.06);
    padding: 20px 16px;
  }

  /* 主内容区 */
  .page-wrap > *:not(.desktop-sidebar) {
    grid-column: 2;
    max-width: 900px;
  }

  /* 内容双列网格 */
  .desktop-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .desktop-grid > .full-width {
    grid-column: 1 / -1;
  }

  /* 卡片在桌面端同行并排 */
  .card-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
  }

  /* 顶栏撑满宽度 */
  .app-top-bar {
    max-width: 100%;
  }
  .app-sub-tabs {
    max-width: 100%;
  }

  /* 底部导航在桌面端变侧栏（隐藏移动Tab） */
  .tab-bar.shared-bottom-nav {
    display: none;
  }

  /* 学伴浮动头像桌面端位置 */
  .companion-avatar-float {
    bottom: 24px;
    left: calc((100vw - 900px) / 2 - 60px);
    left: max(16px, calc((100vw - 900px) / 2 - 60px));
  }

  /* 更多面板桌面端居中弹窗 */
  .more-panel {
    max-width: 600px;
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(100%);
    border-radius: 24px 24px 0 0;
    bottom: 0;
    margin: 0;
  }
  .more-panel.open {
    transform: translateX(-50%) translateY(0);
  }

  /* FAB按钮桌面端位置 */
  .fab-container {
    right: calc((100vw - 900px) / 2 - 70px);
    right: max(16px, calc((100vw - 900px) / 2 - 70px));
  }

  /* 内页内容双栏适配 */
  .two-col-desktop {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  /* 4卡片网格 */
  .quad-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }

  /* 3卡片网格 */
  .triple-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
}

@media (min-width: 1024px) {
  .page-wrap {
    max-width: 1400px;
  }
  .desktop-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* --- 移动端隐藏桌面专用元素 --- */
.desktop-sidebar {
  display: none;
}
.desktop-only {
  display: none !important;
}
@media (min-width: 768px) {
  .desktop-only {
    display: flex !important;
  }
  .mobile-only {
    display: none !important;
  }
}

/* ===== 桌面端侧栏导航样式 ===== */
.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0 20px;
  border-bottom: 1px solid rgba(233,30,99,.08);
  margin-bottom: 12px;
}
.sidebar-logo-icon {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, #E91E63, #FF6D00);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; color: #fff;
}
.sidebar-logo-text {
  font-size: .9rem; font-weight: 800;
  background: linear-gradient(135deg, #E91E63, #FF6D00);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
  color: #666;
  font-size: .82rem;
  font-weight: 500;
  transition: all .2s;
  cursor: pointer;
}
.sidebar-nav-item:hover {
  background: rgba(233,30,99,.04);
  color: #E91E63;
}
.sidebar-nav-item.active {
  background: rgba(233,30,99,.08);
  color: #E91E63;
  font-weight: 700;
}
.sidebar-nav-icon {
  font-size: 1.1rem;
  width: 24px;
  text-align: center;
}
.sidebar-section-title {
  font-size: .65rem;
  font-weight: 700;
  color: #aaa;
  padding: 16px 12px 6px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* ===== 暗色模式适配 ===== */
html.dark .app-top-bar {
  background: rgba(26,26,46,.92); border-bottom-color: rgba(255,255,255,.06);
}
html.dark .atb-title { color: #f0f0f5; }
html.dark .atb-back { background: rgba(255,255,255,.08); color: #FF6B9D; }
html.dark .atb-action { color: #aaa; }
html.dark .app-sub-tabs {
  background: rgba(26,26,46,.92); border-bottom-color: rgba(255,255,255,.04);
}
html.dark .sub-tab { background: rgba(255,255,255,.06); color: #aaa; }
html.dark .sub-tab:not(.active):active { background: rgba(255,255,255,.1); }
html.dark .tab-bar.shared-bottom-nav {
  background: rgba(26,26,46,.96); border-top-color: rgba(255,255,255,.06);
}
html.dark .tab-item { color: #777; }
html.dark .tab-item.active { color: #FF6B9D; }
html.dark .tab-more-btn { color: #777; }
html.dark .more-panel { background: #1A1A2E; }
html.dark .mp-section-title { color: #aaa; }
html.dark .mp-item { background: rgba(255,255,255,.06); }
html.dark .mp-item.current { background: rgba(255,107,157,.1); border-color: rgba(255,107,157,.3); }
html.dark .mp-item-label { color: #bbb; }
html.dark .mp-item.current .mp-item-label { color: #FF6B9D; }
html.dark .mp-close { background: rgba(255,255,255,.1); color: #ccc; }
html.dark .mp-actions { border-top-color: rgba(255,255,255,.08); }