/* 荟邻生活内部导航 · 入口页样式（移动端优先 / 响应式） */
:root {
  --green: #1B9E5A; --green-deep: #157A47; --green-soft: #E8F6EE;
  --blue: #2D8CF0; --blue-soft: #E8F1FD;
  --orange: #FF9F43; --orange-soft: #FFF1E3;
  --text: #1f2d28; --text-2: #46574E; --muted: #8A978F;
  --line: #E8ECEA; --bg: #F4F6F5; --card: #fff;
  --nav-h: 60px; /* 底部导航高度 */
  --radius: 16px;
  --shadow: 0 2px 8px rgba(20, 36, 28, .06);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: var(--text); background: var(--bg); line-height: 1.6; font-size: 15px;
  -webkit-text-size-adjust: 100%;
}
a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }

/* 顶部横幅 */
.hero {
  background: linear-gradient(135deg, #157A47 0%, #1B9E5A 55%, #2D8CF0 120%);
  color: #fff; padding: 40px 24px 28px; text-align: center;
}
.hero h1 { font-size: 26px; font-weight: 700; letter-spacing: .5px; }
.hero p { opacity: .92; margin-top: 8px; font-size: 14px; }

/* 固定工具栏（滚动时始终可见，保证搜索不丢失） */
.toolbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  padding: 12px 16px;
  box-shadow: 0 2px 12px rgba(20, 36, 28, .08);
}
.search-box { position: relative; max-width: 560px; margin: 0 auto; }
.search-box .search-ico {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  font-size: 14px; opacity: .55; pointer-events: none;
}
.search-box input {
  width: 100%; padding: 11px 18px 11px 40px; border: 1px solid var(--line);
  border-radius: 999px; font-size: 15px; outline: none; background: #fff;
  box-shadow: 0 1px 4px rgba(20, 36, 28, .05);
}
.search-box input:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }

/* 分段控件（桌面端显示，点击平滑跳转到对应分组） */
.tabs {
  display: flex; gap: 6px; max-width: 1080px; margin: 12px auto 0;
  overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px;
}
.tab {
  flex: 0 0 auto; border: 1px solid var(--line); background: #fff;
  color: var(--text-2); padding: 7px 16px; border-radius: 999px;
  font-size: 14px; cursor: pointer; white-space: nowrap; transition: .15s;
}
.tab:hover { border-color: var(--green); color: var(--green); }
.tab.active { background: var(--green); border-color: var(--green); color: #fff; font-weight: 600; }

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

/* 分组 */
.group { margin-bottom: 32px; scroll-margin-top: 120px; }
.group-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.group-head .gicon { font-size: 22px; }
.group-head .gname { font-size: 20px; font-weight: 700; color: var(--text); }
.group-head .gdesc { font-size: 13px; color: var(--muted); }
.group-head::after { content: ''; flex: 1; height: 1px; background: var(--line); margin-left: 8px; }

/* 卡片网格 */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; box-shadow: var(--shadow); transition: .18s;
  display: flex; flex-direction: column; gap: 8px;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(20, 36, 28, .10); border-color: var(--green); }
.card .ctitle { font-size: 16px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card .ctitle:hover { color: var(--green); text-decoration: none; }
.card .cdesc { font-size: 13.5px; color: var(--text-2); flex: 1; }
.card .cmeta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tag { font-size: 11.5px; padding: 2px 10px; border-radius: 20px; background: var(--blue-soft); color: var(--blue); }
.tag.orange { background: var(--orange-soft); color: #E07B00; }
.tag.green { background: var(--green-soft); color: var(--green); }
.badge-open { font-size: 11.5px; padding: 2px 10px; border-radius: 20px; background: var(--green); color: #fff; margin-left: auto; }

/* 空状态 */
.empty { text-align: center; padding: 60px 0; color: var(--muted); font-size: 16px; }
.hidden { display: none; }

/* 页脚 */
.footer { text-align: center; padding: 22px; color: var(--muted); font-size: 13px; border-top: 1px solid var(--line); background: #fff; }

/* 状态条 */
.status-bar {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: var(--text); color: #fff; padding: 10px 20px; border-radius: 999px;
  font-size: 13px; opacity: 0; pointer-events: none; transition: .3s; z-index: 99;
}
.status-bar.show { opacity: .95; }

/* ============ 移动端（≤768px）============ */
.bottom-nav { display: none; }

@media (max-width: 768px) {
  .hero { padding: 28px 16px 20px; }
  .hero h1 { font-size: 22px; }

  /* 移动端隐藏顶部分段控件，改用底部固定导航 */
  .tabs { display: none; }

  .container { padding: 18px 14px calc(var(--nav-h) + 28px); }

  /* 单栏卡片，更贴合拇指操作 */
  .grid { grid-template-columns: 1fr; gap: 12px; }
  .card { padding: 16px; }
  .card .ctitle { font-size: 15.5px; }

  /* 底部固定导航栏：分类切换，单手可达 */
  .bottom-nav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(255, 255, 255, .98);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -2px 12px rgba(20, 36, 28, .08);
  }
  .nav-item {
    flex: 1; border: none; background: transparent; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; color: var(--muted); font-size: 11px; padding: 6px 2px; transition: .15s;
  }
  .nav-item .nav-icon { font-size: 20px; line-height: 1; }
  .nav-item .nav-label { font-size: 11px; white-space: nowrap; }
  .nav-item.active { color: var(--green); }
  .nav-item.active .nav-icon { transform: translateY(-1px); }

  .status-bar { bottom: calc(var(--nav-h) + 16px); }
}

/* ============ 桌面端（>768px）============ */
@media (min-width: 769px) {
  .bottom-nav { display: none !important; }
  .container { padding-bottom: 60px; }
}