/* ============================================================
   common.css — 全局共享样式
   ============================================================ */
:root {
  --green:       #22c55e;
  --green-dark:  #16a34a;
  --green-light: #f0fdf4;
  --blue:        #4A6CF7;
  --blue-dark:   #1E2761;
  --blue-light:  #EEF2FF;
  --orange:      #f97316;
  --orange-light:#fff7ed;
  --purple:      #a855f7;
  --purple-light:#fdf4ff;
  --red-light:   #fff1f2;
  --sky-light:   #f0f9ff;
  --gray-50:     #f9fafb;
  --gray-100:    #f3f4f6;
  --gray-200:    #e5e7eb;
  --gray-400:    #9ca3af;
  --gray-600:    #4b5563;
  --gray-800:    #1f2937;
  --shadow-sm:   0 1px 3px rgba(0,0,0,.08);
  --shadow-md:   0 4px 16px rgba(0,0,0,.10);
  --shadow-lg:   0 8px 32px rgba(0,0,0,.12);
  --radius:      12px;
  --radius-sm:   8px;
  --radius-lg:   16px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family: "PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;
  color: var(--gray-800);
  background: #f8f9fb;
  line-height: 1.6;
}
a { text-decoration:none; color:inherit; }
img { display:block; max-width:100%; }

.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---- Buttons ---- */
.btn-primary {
  display:inline-block;
  background: var(--green);
  color:#fff;
  padding: 10px 22px;
  border-radius: 8px;
  font-weight:600;
  font-size:14px;
  transition:.2s;
  border:none;
  cursor:pointer;
}
.btn-primary:hover { background:var(--green-dark); transform:translateY(-1px); }

.btn-outline {
  display:inline-block;
  border: 2px solid var(--green);
  color: var(--green);
  padding: 8px 20px;
  border-radius: 8px;
  font-weight:600;
  font-size:14px;
  transition:.2s;
}
.btn-outline:hover { background:var(--green); color:#fff; }

.btn-block { display:block; width:100%; text-align:center; }

/* ---- Navbar ---- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 999;
  background: #fff;
  border-bottom: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
}
.nav-inner {
  max-width:1160px;
  margin:0 auto;
  padding:0 20px;
  height:64px;
  display:flex;
  align-items:center;
  gap:32px;
}
.logo-wrapper {
  display:flex;
  flex-direction:column;
  white-space:nowrap;
  flex-shrink:0;
}
.logo {
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}
.logo-icon { font-size:22px; }
.logo-text {
  font-size:18px;
  font-weight:800;
  background:linear-gradient(135deg,var(--green-dark),var(--blue));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.logo-slogan {
  font-size:11px;
  color:var(--gray-400);
  font-weight:500;
  white-space:nowrap;
  letter-spacing:0.5px;
  margin-left: 30px; /* 对齐logo文字 */
}
.nav-links {
  display:flex;
  gap:24px;
  flex:1;
}
.nav-links a {
  font-size:15px;
  color:var(--gray-600);
  font-weight:500;
  padding:4px 0;
  border-bottom:2px solid transparent;
  transition:.2s;
}
.nav-links a:hover, .nav-links a.active {
  color:var(--green-dark);
  border-bottom-color:var(--green);
}
.nav-actions { display:flex; gap:10px; align-items:center; }
.nav-search { position:relative; display:flex; align-items:center; }
.notif-btn {
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%; background:#f3f4f6;
  font-size:18px; text-decoration:none; transition:.2s;
}
.notif-btn:hover { background:#e5e7eb; }
.notif-dot {
  position:absolute; top:-2px; right:-2px;
  min-width:18px; height:18px; padding:0 4px;
  background:#ef4444; color:#fff; border-radius:10px;
  font-size:10px; font-weight:800; line-height:18px; text-align:center;
  border:2px solid #fff;
  display:inline-flex; align-items:center; justify-content:center;
  animation:notifPulse 2s ease-in-out infinite;
}
@keyframes notifPulse {
  0%,100% { transform:scale(1); }
  50% { transform:scale(1.15); }
}
.hamburger {
  display:none;
  font-size:22px;
  background:none;
  border:none;
  cursor:pointer;
  margin-left:auto;
  color:var(--gray-600);
}
.mobile-menu {
  display:none;
  flex-direction:column;
  background:#fff;
  border-top:1px solid var(--gray-200);
  padding:12px 20px;
}
.mobile-menu.open { display:flex; }
.mobile-menu a {
  padding:10px 0;
  border-bottom:1px solid var(--gray-100);
  font-size:15px;
  color:var(--gray-600);
}

/* ---- Section headers ---- */
.section-header {
  text-align:center;
  margin-bottom:40px;
}
.section-header h2 {
  font-size:28px;
  font-weight:800;
  color:var(--gray-800);
  margin-bottom:8px;
}
.section-header p {
  font-size:15px;
  color:var(--gray-400);
}

/* ---- Tags ---- */
.post-tag {
  display:inline-block;
  font-size:11px;
  font-weight:700;
  padding:2px 10px;
  border-radius:20px;
  white-space:nowrap;
}
.tag-exp { background:#dbeafe; color:#1d4ed8; }
.tag-qa  { background:#fef3c7; color:#d97706; }
.tag-res { background:#dcfce7; color:#15803d; }
.tag-vent{ background:#fce7f3; color:#be185d; }

/* ---- Avatars ---- */
.avatar-xs {
  width:28px; height:28px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
}
.avatar-sm {
  width:38px; height:38px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
}
.avatar-md {
  width:56px; height:56px;
  border-radius:50%;
  object-fit:cover;
}

/* ---- Footer ---- */
.footer {
  background:var(--blue-dark);
  color:rgba(255,255,255,.75);
  margin-top:80px;
  padding:48px 0 24px;
}
.footer-grid {
  display:grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap:32px;
  padding-bottom:40px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-brand .logo { margin-bottom:12px; }
.footer-brand .logo-text { -webkit-text-fill-color:#fff; }
.footer-brand p { font-size:13px; line-height:1.8; }
.footer-links h5 { color:#fff; font-size:14px; font-weight:700; margin-bottom:14px; }
.footer-links a {
  display:block;
  font-size:13px;
  color:rgba(255,255,255,.65);
  margin-bottom:8px;
  transition:.2s;
}
.footer-links a:hover { color:#fff; }
.footer-bottom {
  text-align:center;
  padding-top:24px;
  font-size:13px;
  color:rgba(255,255,255,.4);
}


/* ======================================================
   响应式 — 中屏 (≤992px)
====================================================== */
@media(max-width:992px) {
  .nav-inner { gap: 16px; }
  .nav-links { gap: 14px; }
  .nav-links a { font-size: 13px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .footer-brand { grid-column: 1 / -1; }
}

/* ======================================================
   响应式 — 移动端 (≤768px)
====================================================== */
@media(max-width:768px) {
  /* 导航 */
  .nav-links, .nav-actions { display: none; }
  .hamburger { display: block; }
  .nav-inner { gap: 0; justify-content: space-between; }
  .logo-text { font-size: 15px; }

  /* 汉堡菜单展开样式 */
  .mobile-menu {
    display: none;
    flex-direction: column;
    background: #fff;
    border-top: 1px solid #e5e7eb;
    padding: 12px 0;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
  }
  .mobile-menu.open { display: flex; }
  .mobile-menu a {
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 600;
    color: #374151;
    text-decoration: none;
    border-bottom: 1px solid #f3f4f6;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .mobile-menu a:last-child { border-bottom: none; }
  .mobile-menu a:active { background: #f9fafb; }

  /* 按钮触摸目标 */
  .btn-primary, .btn-outline {
    min-height: 44px;
    padding: 10px 18px;
    font-size: 14px;
  }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand p { font-size: 13px; }

  /* 通用容器 */
  .container { padding: 0 16px; }
  .section-header h2 { font-size: 22px; }
  .section-header p { font-size: 14px; }
}

/* ======================================================
   响应式 — 小屏 (≤480px)
====================================================== */
@media(max-width:480px) {
  .footer-grid { grid-template-columns: 1fr; gap: 16px; }
  .section-header h2 { font-size: 20px; }
  .logo-text { font-size: 14px; }

  /* 导航栏高度紧凑 */
  .navbar { min-height: 56px; }
  .nav-inner { height: 56px; }

  /* 消息提示框 */
  .toast-container {
    left: 12px !important;
    right: 12px !important;
    max-width: 100% !important;
  }
}