:root {
  --primary: #4f7cff;
  --primary-dark: #3a63d8;
  --primary-light: #eef2ff;
  --text: #1f2937;
  --text-2: #6b7280;
  --bg: #f5f6fa;
  --card: #ffffff;
  --border: #eef0f4;
  --danger: #ef4444;
  --success: #10b981;
  --radius: 14px;
  --shadow: 0 1px 3px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.04);
  --shadow-hover: 0 4px 8px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.08);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
}

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); }

/* 顶部导航 */
.navbar {
  background: var(--card);
  box-shadow: 0 1px 0 var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.navbar-inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 16px;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.logo {
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}
.logo .dot {
  width: 22px;
  height: 22px;
  background: linear-gradient(135deg, var(--primary), #8b5cf6);
  border-radius: 6px;
  display: inline-block;
}
/* 校徽 logo 图 */
.logo-img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  display: inline-block;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    0 2px 8px rgba(79, 124, 255, 0.5),
    0 4px 16px rgba(139, 92, 246, 0.4);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
}
.logo:hover .logo-img {
  transform: scale(1.1) rotate(6deg);
  box-shadow:
    0 4px 12px rgba(79, 124, 255, 0.6),
    0 8px 24px rgba(139, 92, 246, 0.5);
}
.search-box {
  flex: 1;
  display: flex;
  align-items: center;
  background: #f1f3f7;
  border-radius: 10px;
  padding: 0 12px;
  height: 38px;
}
.search-box input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  color: var(--text);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}
.nav-links a { color: var(--text-2); font-size: 14px; }
.nav-links a:hover { color: var(--primary); }

/* 按钮 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: all .15s;
  text-decoration: none;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); color: #fff; }
.btn-outline { background: #fff; color: var(--primary); border: 1.5px solid var(--primary); }
.btn-outline:hover { background: var(--primary-light); }
.btn-ghost { background: transparent; color: var(--text-2); }
.btn-ghost:hover { color: var(--primary); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-sm { padding: 5px 12px; font-size: 13px; border-radius: 8px; }

/* 容器 */
.container { max-width: 860px; margin: 0 auto; padding: 20px 16px 60px; }

/* 板块标签 */
.category-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.chip {
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 13px;
  background: #fff;
  color: var(--text-2);
  border: 1px solid var(--border);
  cursor: pointer;
}
.chip.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* 帖子卡片 */
.post-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px;
  margin-bottom: 14px;
  transition: box-shadow .15s;
  display: block;
  color: var(--text);
}
.post-card:hover { box-shadow: var(--shadow-hover); }
.post-title { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.post-excerpt {
  font-size: 14px;
  color: var(--text-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-2);
}
.post-meta .tag {
  background: var(--primary-light);
  color: var(--primary);
  padding: 2px 8px;
  border-radius: 6px;
}
.post-meta .stat { display: inline-flex; align-items: center; gap: 4px; }

/* 表单 */
.form-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px;
  max-width: 420px;
  margin: 40px auto;
}
.form-card h2 { font-size: 22px; margin-bottom: 24px; text-align: center; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; color: var(--text-2); margin-bottom: 6px; }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  outline: none;
  transition: border .15s;
  font-family: inherit;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--primary); }
.field textarea { resize: vertical; min-height: 120px; }
.field .hint { font-size: 12px; color: var(--text-2); margin-top: 4px; }

/* 复选框 */
.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-2);
  margin-bottom: 16px;
}

/* 提示消息 */
.flash {
  padding: 12px 16px;
  border-radius: 10px;
  margin-bottom: 16px;
  font-size: 14px;
}
.flash.success { background: #ecfdf5; color: #065f46; }
.flash.error { background: #fef2f2; color: #991b1b; }
.flash.warn { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }

/* 分步表单：分组框 + 隐私说明 */
.form-card fieldset {
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
}
.form-card legend {
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
  padding: 0 8px;
}
.privacy-note {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 20px;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.7;
}
.privacy-note strong { color: var(--text); }
.privacy-note p { margin: 6px 0; }

/* 年级标签 */
.tag-grade { background: #fef3c7 !important; color: #b45309 !important; }
.tag-target { background: #ede9fe !important; color: #6d28d9 !important; }

/* 详情页 */
.detail-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  margin-bottom: 16px;
}
.detail-title { font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.detail-content { font-size: 15px; white-space: pre-wrap; margin: 16px 0; line-height: 1.8; }
.detail-actions { display: flex; align-items: center; gap: 12px; }

.comment-item {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.comment-item:last-child { border-bottom: none; }
.comment-head { font-size: 13px; color: var(--text-2); margin-bottom: 4px; }
.comment-body { font-size: 14px; white-space: pre-wrap; }

/* 管理后台 */
.admin-nav {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.stat-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  text-align: center;
}
.stat-card .num { font-size: 30px; font-weight: 700; color: var(--primary); }
.stat-card .label { font-size: 13px; color: var(--text-2); margin-top: 4px; }

/* 表格 */
.table-wrap { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border); }
th { background: #fafbfc; color: var(--text-2); font-weight: 500; font-size: 13px; }
tr:last-child td { border-bottom: none; }

/* 空状态 */
.empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-2);
}
.empty .icon { font-size: 42px; margin-bottom: 12px; }

/* 分页 */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 24px 0;
}

/* 响应式 */
@media (max-width: 640px) {
  .navbar-inner { gap: 10px; }
  .logo { font-size: 16px; }
  .search-box { display: none; }
  .nav-links a.label { display: none; }
  .container { padding: 14px 12px 50px; }
  .form-card { padding: 20px; margin: 20px 12px; }
}

.text-center { text-align: center; }
.text-muted { color: var(--text-2); }
.mt-16 { margin-top: 16px; }
.mt-8 { margin-top: 8px; }
.mb-16 { margin-bottom: 16px; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }

/* 邀请码 */
.invite-box {
  margin-top: 16px;
  background: var(--primary-light);
  border: 1px dashed var(--primary);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}
.invite-label { font-size: 13px; color: var(--text-2); margin-bottom: 6px; }
.invite-code { font-size: 30px; font-weight: 700; letter-spacing: 4px; color: var(--primary); margin-bottom: 6px; font-family: monospace; }

/* 导航红点徽标 */
.badge {
  display: inline-block;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  padding: 0 5px;
  margin-left: 4px;
  border-radius: 9px;
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  text-align: center;
  font-weight: 600;
}

/* 管理后台标签 */
.tag-admin { background: #fef3c7 !important; color: #b45309 !important; padding: 2px 8px; border-radius: 6px; }
.tag-warn { background: #fee2e2 !important; color: #b91c1c !important; padding: 2px 8px; border-radius: 6px; }
.tag-success { background: #d1fae5 !important; color: #065f46 !important; padding: 2px 8px; border-radius: 6px; }
.tag { padding: 2px 8px; border-radius: 6px; background: #eef2ff; color: #4f7cff; }

/* 表格行高亮 */
.row-banned { background: #fef2f2; }
.row-warn { background: #fffbeb; }

/* 操作列按钮 */
.actions-cell { white-space: nowrap; }
.actions-cell form { display: inline-block; margin-right: 4px; }
.actions-cell .btn { margin: 2px 0; }

/* 信息表格（用户详情） */
.info-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.info-table th {
  width: 120px;
  text-align: left;
  color: var(--text-2);
  font-weight: 500;
  padding: 8px 12px 8px 0;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.info-table td { padding: 8px 0; border-bottom: 1px solid var(--border); word-break: break-all; }
.info-table tr:last-child th, .info-table tr:last-child td { border-bottom: none; }

/* 发帖身份单选 */
.radio-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text);
  padding: 6px 0;
}
.radio-row input[type="radio"] { accent-color: var(--primary); width: 16px; height: 16px; }

/* 弹窗 */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  padding: 20px;
}
.modal-box {
  background: #fff;
  border-radius: 16px;
  padding: 28px 24px;
  max-width: 360px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
  animation: pop-in .2s ease;
}
.modal-icon { font-size: 40px; margin-bottom: 12px; }
.modal-box h3 { font-size: 18px; margin-bottom: 8px; }
.modal-box p { font-size: 14px; color: var(--text-2); line-height: 1.7; margin-bottom: 20px; }
@keyframes pop-in {
  from { transform: scale(.92); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ===== 筛选栏 ===== */
.filter-bar {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  margin-bottom: 20px;
}
.filter-bar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.filter-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.filter-reset {
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  transition: color .15s;
}
.filter-reset:hover { color: var(--danger); }

.filter-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.filter-dropdown {
  position: relative;
}
.filter-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: #fff;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: all .18s;
  font-family: inherit;
}
.filter-trigger:hover {
  border-color: var(--primary);
  background: var(--primary-light);
  transform: translateY(-1px);
}
.filter-trigger-label { font-weight: 500; }
.filter-caret {
  font-size: 11px;
  color: var(--text-2);
  transition: transform .2s;
}
.filter-dropdown.open .filter-caret { transform: rotate(180deg); }
.filter-dropdown.open .filter-trigger {
  border-color: var(--primary);
  background: var(--primary-light);
}

/* 已选数量徽标 */
.filter-count {
  display: none;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}
.filter-count.show { display: inline-block; animation: pop-in .2s ease; }

/* 下拉面板 */
.filter-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 160px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
  padding: 6px;
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(.98);
  transition: all .18s ease;
}
.filter-dropdown.open .filter-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.filter-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  transition: background .12s;
  user-select: none;
}
.filter-option:hover { background: var(--primary-light); }
.filter-option input[type="checkbox"] { display: none; }
.filter-check {
  width: 16px;
  height: 16px;
  border: 1.5px solid #d1d5db;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #fff;
  transition: all .15s;
  flex-shrink: 0;
}
.filter-option.checked .filter-check {
  background: var(--primary);
  border-color: var(--primary);
}
.filter-option-name { flex: 1; }

/* 已选标签 */
.filter-active-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.filter-active-tags.hidden { display: none; }
.active-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 20px;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 12px;
  cursor: pointer;
  transition: all .15s;
}
.active-tag:hover { background: #e0e7ff; }
.active-tag b { font-weight: 600; }

/* ===== 帖子卡片淡入动画（已由 JS + .fx-in 滚动入场替代） ===== */
.post-card:hover { transform: translateY(-2px); }

.hidden { display: none; }
/* ============================================================
   SVG 图标系统（mask-image 内联 SVG，颜色随 currentColor）
   ============================================================ */
.ic {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat;
  mask: var(--ic) center / contain no-repeat;
  vertical-align: -0.125em;
  flex-shrink: 0;
}
.ic-like { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10v12'/%3E%3Cpath d='M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z'/%3E%3C/svg%3E"); }
.ic-heart-fill { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E"); }
.ic-comment { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); }
.ic-view { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.06 12.35a1 1 0 0 1 0-.7C3.42 7.67 7.24 4.5 12 4.5s8.58 3.17 9.94 7.15a1 1 0 0 1 0 .7c-1.36 3.98-5.18 7.15-9.94 7.15S3.42 16.33 2.06 12.35Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.ic-clock { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E"); }
.ic-fire { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5Z'/%3E%3C/svg%3E"); }
.ic-user { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); }
.ic-users { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
.ic-edit { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.17 6.83a2.83 2.83 0 0 0-4-4L3 17.01V21h4l14.17-14.17z'/%3E%3Cpath d='m14 5 5 5'/%3E%3C/svg%3E"); }
.ic-shield { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3C/svg%3E"); }
.ic-filter { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3'/%3E%3C/svg%3E"); }
.ic-inbox { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 12 16 12 14 15 10 15 8 12 2 12'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E"); }
.ic-search { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E"); }
.ic-flag { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z'/%3E%3Cline x1='4' x2='4' y1='22' y2='15'/%3E%3C/svg%3E"); }
.ic-lock { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); }
.ic-mail { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E"); }
.ic-gift { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13'/%3E%3Cpath d='M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7'/%3E%3Cpath d='M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5'/%3E%3C/svg%3E"); }
.ic-compass { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z'/%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3C/svg%3E"); }
.ic-alert { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%3E%3C/svg%3E"); }
.ic-check { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }

.ic-accent { color: #f59e0b; }

/* 空状态 icon 容器 */
.empty-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--primary-light), #f3f0ff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--primary);
}

/* meta-stats 图标统计组 */
.meta-stats {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}
.stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-2);
}
.stat .ic { color: #9ca3af; }

/* 模式标签 */
.tag-mode { background: #e0f2fe !important; color: #0369a1 !important; }

/* 作者名 */
.post-author { color: var(--text-2); font-weight: 500; }

/* 点赞按钮 liked 状态 */
.like-btn.liked { background: #fee2e2; border-color: #fecaca; color: #dc2626; }
.like-btn.liked .ic-heart-fill { color: #dc2626; }

/* ============================================================
   抖音同款特效
   ============================================================ */

/* 背景：流动渐变 aurora */
body::before {
  content: '';
  position: fixed;
  inset: -50%;
  z-index: -2;
  background:
    radial-gradient(40% 40% at 20% 20%, rgba(79,124,255,.35), transparent 60%),
    radial-gradient(40% 40% at 80% 20%, rgba(236,72,153,.28), transparent 60%),
    radial-gradient(45% 45% at 50% 80%, rgba(139,92,246,.30), transparent 60%),
    radial-gradient(30% 30% at 70% 70%, rgba(6,182,212,.25), transparent 60%);
  animation: aurora 18s ease-in-out infinite alternate;
  filter: blur(30px);
}
@keyframes aurora {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); }
  33% { transform: translate(-5%, 3%) rotate(20deg) scale(1.15); }
  66% { transform: translate(4%, -4%) rotate(-15deg) scale(1.1); }
  100% { transform: translate(0, 0) rotate(0deg) scale(1); }
}

/* 主体内容盖在粒子之上 */
.container, .navbar { position: relative; z-index: 1; }

/* 卡片玻璃拟态 */
.post-card, .detail-card, .filter-bar, .form-card, .stat-card {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.6);
}

/* 卡片流光扫过（跟随鼠标） */
.post-card {
  position: relative;
  overflow: hidden;
}
.post-card::after {
  content: '';
  position: absolute;
  left: var(--mx, 50%);
  top: var(--my, 50%);
  width: 0; height: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79,124,255,.12), transparent 60%);
  transform: translate(-50%, -50%);
  transition: width .4s, height .4s, opacity .4s;
  opacity: 0;
  pointer-events: none;
}
.post-card:hover::after {
  width: 500px; height: 500px;
  opacity: 1;
}

/* 卡片边框渐变光 */
.post-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg, transparent 30%, rgba(79,124,255,.5), rgba(236,72,153,.5), transparent 70%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.post-card:hover::before { opacity: 1; }

/* 滚动入场 */
.fx-pre { opacity: 0; transform: translateY(28px) scale(.97); }
.fx-in {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.34,1.56,.64,1);
}

/* 3D 卡片过渡 */
.post-card { transition: transform .35s cubic-bezier(.23,1,.32,1), box-shadow .3s; }

/* 按钮波纹 */
.btn { position: relative; overflow: hidden; }
.btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.5);
  transform: scale(0);
  animation: ripple .6s ease-out;
  pointer-events: none;
}
@keyframes ripple {
  to { transform: scale(1); opacity: 0; }
}

/* 点赞弹跳 */
@keyframes like-pop-kf {
  0% { transform: scale(1); }
  40% { transform: scale(1.25); }
  100% { transform: scale(1); }
}
.like-pop { animation: like-pop-kf .4s ease; }

/* 爱心粒子 */
.heart-particle {
  position: fixed;
  font-size: 16px;
  z-index: 999;
  pointer-events: none;
  animation: heart-fly .7s ease-out forwards;
}
@keyframes heart-fly {
  0% { transform: translate(0,0) scale(.6); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(1.4); opacity: 0; }
}

/* 筛选面板弹性动画 */
.filter-panel {
  transition: opacity .25s cubic-bezier(.34,1.56,.64,1), transform .35s cubic-bezier(.34,1.56,.64,1), visibility .25s;
}
.filter-dropdown.open .filter-panel {
  transform: translateY(0) scale(1);
}

/* 导航毛玻璃 */
.navbar {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(255,255,255,.75);
  border-bottom: 1px solid rgba(255,255,255,.5);
}

/* 导航 logo 渐变光动画 */
.logo .dot {
  background: linear-gradient(135deg, #4f7cff, #8b5cf6, #ec4899);
  background-size: 200% 200%;
  animation: logo-grad 4s ease infinite;
}
@keyframes logo-grad {
  0%,100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* 主按钮渐变 */
.btn-primary {
  background: linear-gradient(135deg, #4f7cff, #8b5cf6);
  background-size: 200% 200%;
  animation: btn-grad 5s ease infinite;
  border: none;
  box-shadow: 0 4px 14px rgba(79,124,255,.35);
}
@keyframes btn-grad {
  0%,100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.btn-primary:hover { box-shadow: 0 6px 20px rgba(139,92,246,.45); transform: translateY(-1px); }

/* 空状态图标呼吸 */
.empty-icon { animation: float 3s ease-in-out infinite; }
@keyframes float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ============================================================
   高级阴影系统（多层投影 + 彩色发光 + 纵深）
   ============================================================ */

/* 基础卡片：多层柔和投影，营造悬浮纵深 */
.post-card,
.detail-card,
.filter-bar,
.form-card,
.stat-card,
.table-wrap {
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 4px 8px rgba(15, 23, 42, 0.06),
    0 12px 24px rgba(15, 23, 42, 0.08),
    0 24px 48px rgba(15, 23, 42, 0.06);
  transition: box-shadow .35s cubic-bezier(.23,1,.32,1), transform .35s cubic-bezier(.23,1,.32,1);
}

/* hover：悬浮抬升 + 彩色光晕投影（蓝紫渐变） */
.post-card:hover,
.detail-card:hover,
.stat-card:hover {
  box-shadow:
    0 2px 4px rgba(15, 23, 42, 0.05),
    0 8px 16px rgba(15, 23, 42, 0.08),
    0 20px 40px rgba(79, 124, 255, 0.18),
    0 32px 64px rgba(139, 92, 246, 0.16),
    0 0 0 1px rgba(79, 124, 255, 0.12);
  transform: translateY(-6px) scale(1.01);
}

/* 高亮悬浮层：彩色光晕从下方透出 */
.post-card:hover {
  box-shadow:
    0 2px 4px rgba(15, 23, 42, 0.05),
    0 10px 20px rgba(15, 23, 42, 0.09),
    0 24px 48px rgba(79, 124, 255, 0.22),
    0 40px 80px rgba(236, 72, 153, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* 主按钮：渐变 + 彩色发光投影 */
.btn-primary {
  box-shadow:
    0 2px 6px rgba(79, 124, 255, 0.4),
    0 8px 24px rgba(79, 124, 255, 0.35),
    0 16px 40px rgba(139, 92, 246, 0.25);
}
.btn-primary:hover {
  box-shadow:
    0 4px 10px rgba(79, 124, 255, 0.5),
    0 12px 32px rgba(79, 124, 255, 0.45),
    0 24px 56px rgba(139, 92, 246, 0.35);
  transform: translateY(-2px);
}

/* 普通描边按钮：柔和投影 */
.btn-outline {
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(15, 23, 42, 0.06);
}
.btn-outline:hover {
  box-shadow: 0 2px 6px rgba(79, 124, 255, 0.2), 0 8px 20px rgba(79, 124, 255, 0.15);
  transform: translateY(-1px);
}

/* 导航栏：悬浮投影 */
.navbar {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 1px 3px rgba(15, 23, 42, 0.06),
    0 8px 24px rgba(15, 23, 42, 0.06);
}

/* 输入框聚焦：彩色光晕 */
.field input:focus,
.field textarea:focus,
.field select:focus {
  box-shadow: 0 0 0 3px rgba(79, 124, 255, 0.15), 0 0 0 1px var(--primary);
}

/* 下拉面板：重投影 */
.filter-panel {
  box-shadow:
    0 4px 12px rgba(15, 23, 42, 0.10),
    0 16px 40px rgba(15, 23, 42, 0.16),
    0 32px 80px rgba(79, 124, 255, 0.10);
}

/* 弹窗：超深投影 */
.modal-box {
  box-shadow:
    0 4px 12px rgba(15, 23, 42, 0.12),
    0 24px 60px rgba(15, 23, 42, 0.25),
    0 48px 120px rgba(15, 23, 42, 0.20);
}

/* 邀请码框：彩色投影 */
.invite-box {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 4px 16px rgba(79, 124, 255, 0.15),
    0 8px 32px rgba(139, 92, 246, 0.10);
}

/* 筛选触发器 hover：彩色投影 */
.filter-trigger:hover {
  box-shadow: 0 2px 8px rgba(79, 124, 255, 0.2);
}

/* 已选标签：彩色投影 */
.active-tag {
  box-shadow: 0 1px 3px rgba(79, 124, 255, 0.18);
}

/* 统计卡片：彩色数值投影 */
.stat-card .num {
  text-shadow: 0 2px 12px rgba(79, 124, 255, 0.35);
}

/* 帖子标题：轻微文字投影增加精致感 */
.post-title,
.detail-title {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* 空状态图标：彩色发光投影 */
.empty-icon {
  box-shadow:
    0 8px 24px rgba(79, 124, 255, 0.25),
    0 16px 48px rgba(139, 92, 246, 0.18);
}

/* 头像/圆点：彩色发光 */
.logo .dot {
  box-shadow:
    0 2px 8px rgba(79, 124, 255, 0.5),
    0 4px 16px rgba(139, 92, 246, 0.4);
}

/* 徽标红点：发光 */
.badge {
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.5);
}

.admin-info-row { display:flex; flex-wrap:wrap; gap:16px; font-size:14px; color:var(--text-1,#333); }
.admin-info-row span { display:inline-flex; align-items:center; gap:4px; }
.comment-admin-info { font-size:12px; color:#b45309; background:#fffbeb; border:1px dashed #f59e0b; border-radius:6px; padding:6px 8px; margin:6px 0; }

/* ============================================================
   性能优化 + 华丽度增强层（不覆盖原功能）
   ============================================================ */
/* 全局硬件加速，减少重排 */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.post-card, .detail-card, .filter-bar, .form-card, .stat-card, .table-wrap,
.btn, .navbar, .filter-panel, .modal-box {
  will-change: transform;
  transform: translateZ(0);
}
/* 低配/减少动态偏好：关闭重动画，保证流畅与可访问性 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
/* 移动端降低模糊与粒子负担（backdrop-filter 很耗 GPU） */
@media (max-width: 640px) {
  .post-card, .detail-card, .filter-bar, .form-card, .stat-card {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  body::before { filter: blur(20px); }
}
/* 帖子卡片交错入场：延迟依次浮现，舞台感更强 */
.fx-pre { transition-delay: 0ms; }
.post-card.fx-in, .detail-card.fx-in { transition-delay: calc(var(--i, 0) * 40ms); }
/* 卡片精致悬浮：加轻微倾斜透视 + 更柔和的回弹 */
.post-card {
  transform-origin: center;
  transition: transform .45s cubic-bezier(.22,1.4,.36,1), box-shadow .4s ease, border-color .3s ease;
}
/* 点赞按钮色彩渐变点亮 */
.like-btn {
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), background .25s, color .25s, box-shadow .25s;
}
.like-btn:hover { transform: translateY(-1px) scale(1.03); }
/* 链接/标签柔和过渡 */
.tag, .chip, .active-tag, .filter-trigger { transition: all .25s cubic-bezier(.22,1,.36,1); }
/* 焦点可见性（无障碍 + 精致） */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 6px;
}
/* 静音滚动条，更精致 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #c7d2fe, #ddd6fe);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #a5b4fc, #c4b5fd); }
::-webkit-scrollbar-track { background: transparent; }
/* 首页淡入（body 进入时整页浮现） */
body { animation: page-in .5s ease both; }
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }

/* 低配设备降级：关闭粒子背景与模糊，保住流畅度 */
body.low-perf .fx-particles { display: none; }
body.low-perf .post-card,
body.low-perf .detail-card,
body.low-perf .filter-bar,
body.low-perf .form-card,
body.low-perf .stat-card {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: #fff;
}
body.low-perf::before { filter: blur(14px); }
/* ============================================================
   响应式自适应体系 (现代流式布局)
   技术：clamp()流式排版 + flex-wrap + overflow-wrap + 多级断点
   ============================================================ */

/* --- 全局基础：防溢出 --- */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
*, *::before, *::after { min-width: 0; }
img, svg, video { max-width: 100%; height: auto; }
a, span, div, p, h1, h2, h3, h4, th, td, li, button, input, textarea, select {
  overflow-wrap: anywhere;
  word-break: break-word;
}
input, textarea, select, button { font-family: inherit; }

/* --- 容器：流式内边距 --- */
.container {
  max-width: clamp(860px, 92vw, 1100px);
  padding: clamp(12px, 2.5vw, 20px) clamp(10px, 3vw, 16px) 60px;
}

/* --- 帖子卡片：meta 允许换行，防标签冲突 --- */
.post-meta {
  flex-wrap: wrap;
  row-gap: 6px;
}
.post-title {
  font-size: clamp(15px, 1.6vw, 17px);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.post-excerpt { overflow-wrap: anywhere; }
.meta-stats { flex-wrap: wrap; row-gap: 4px; }

/* --- 表格：移动端可横向滚动 --- */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overflow-y: hidden;
}
table { min-width: 480px; }
.actions-cell { white-space: normal; word-break: break-word; }

/* --- 筛选栏：下拉面板防溢出 --- */
.filter-groups { gap: 8px; }
.filter-dropdown { max-width: 100%; }
.filter-panel { max-width: min(280px, 80vw); }

/* --- 表单 & 卡片流式宽度 --- */
.form-card {
  max-width: min(420px, 100%);
  width: 100%;
  box-sizing: border-box;
}

/* ============================================================
   断点 1：平板横屏 / 小笔记本 (<=1024px)
   ============================================================ */
@media (max-width: 1024px) {
  .navbar-inner { gap: 10px; flex-wrap: wrap; }
  .search-box { flex: 1 1 200px; min-width: 160px; }
}

/* ============================================================
   断点 2：平板竖屏 (<=768px)
   ============================================================ */
@media (max-width: 768px) {
  .container { max-width: 100%; }
  .post-card { padding: 16px; }
  .post-meta { gap: 10px; }
  .filter-bar { padding: 14px; }
  .filter-dropdown { flex: 1 1 160px; }
  .form-card { margin: 24px 14px; padding: 22px; }
  .detail-title { font-size: clamp(18px, 4vw, 22px); }
  .detail-content { font-size: 15px; }
}

/* ============================================================
   断点 3：手机 (<=640px)
   ============================================================ */
@media (max-width: 640px) {
  .navbar-inner { gap: 8px; }
  .nav-links { gap: 8px; flex-wrap: wrap; }
  .logo { font-size: clamp(14px, 3.6vw, 16px); }
  .logo-img { width: 24px; height: 24px; }
  .container { padding: 10px 10px 46px; }
  .post-card { padding: 14px; margin-bottom: 10px; }
  .post-title { margin-bottom: 4px; }
  .post-meta { gap: 8px; margin-top: 10px; }
  .post-meta .tag { padding: 2px 6px; font-size: 11px; }
  .filter-bar { padding: 12px; }
  .filter-groups { gap: 8px; }
  .filter-dropdown { flex: 1 1 140px; }
  .filter-trigger { padding: 7px 10px; font-size: 12px; width: 100%; justify-content: space-between; }
  .filter-panel { position: static; width: 100%; max-width: 100%; box-shadow: none; margin-top: 6px; }
  .form-card { margin: 16px 8px; padding: 18px 16px; }
  .btn { padding: 7px 14px; font-size: 13px; }
  .comment-item { padding: 12px 0; }
  .pagination { flex-wrap: wrap; gap: 8px; }
  .stat-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
  table { font-size: 13px; }
}

/* ============================================================
   断点 4：小手机 (<=480px)
   ============================================================ */
@media (max-width: 480px) {
  .nav-links a.label { padding: 4px; }
  .nav-links .btn { padding: 5px 10px; font-size: 12px; }
  .post-card { padding: 12px; }
  .post-title { font-size: 15px; }
  .post-excerpt { font-size: 13px; -webkit-line-clamp: 3; }
  .post-meta { font-size: 11px; }
  .meta-stats .stat { gap: 2px; }
  .filter-dropdown { flex: 1 1 100%; }
  .filter-bar-head { flex-wrap: wrap; gap: 6px; }
  .detail-content { font-size: 14px; }
  .comment-body { font-size: 13px; }
}

/* ============================================================
   断点 5：极小屏 (<=360px)
   ============================================================ */
@media (max-width: 360px) {
  .container { padding: 8px 8px 40px; }
  .post-card { padding: 10px; }
  .post-title { font-size: 14px; }
  .form-card { padding: 14px 12px; margin: 12px 6px; }
  .btn { padding: 6px 10px; font-size: 12px; }
}

/* --- 横屏 / 大屏优化 --- */
@media (min-width: 1200px) {
  .container { max-width: 1100px; }
}

/* detail-actions 窄屏允许换行，防止按钮溢出 */
.detail-actions { flex-wrap: wrap; row-gap: 8px; }
.navbar-inner { flex-wrap: wrap; }
.logo { min-width: 0; }
.nav-links { flex-wrap: wrap; }