/* 口径说明（系统分组）
 * 类名一律 gl- 前缀；颜色全部取 app.css 的 CSS 变量。
 * 双端：桌面＝左侧模块分类 + 右侧条目；768px 断点降级为单列，分类变横向滚动标签。
 */

.gl-loading { padding: 40px 16px; text-align: center; color: var(--text-3); font-size: var(--fs-base); }
.gl-err {
  padding: 10px 14px; border-radius: var(--r-md); background: var(--danger-weak);
  color: var(--danger); font-size: var(--fs-base);
}
.gl-empty { padding: 30px 16px; text-align: center; color: var(--text-3); font-size: var(--fs-base); line-height: 1.9; }

/* 工具条：搜索 + 计数 */
.gl-tool { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.gl-search {
  flex: 0 1 320px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-md);
  font-size: var(--fs-base); font-family: inherit; color: var(--text); background: var(--card);
}
.gl-search:focus { border-color: var(--brand); }
.gl-sum { font-size: var(--fs-sm); color: var(--text-3); }

/* 两栏 */
.gl-wrap { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 20px; align-items: start; }

/* 左侧模块分类 */
.gl-side { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 2px; }
.gl-side-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 10px; border-radius: var(--r-sm); font-size: var(--fs-base); color: var(--text-2); cursor: pointer;
}
.gl-side-item:hover { background: var(--line-2); }
.gl-side-item.on { background: var(--brand-weak); color: var(--brand-dark); font-weight: 500; }
.gl-side-item.off { color: var(--text-3); opacity: .45; cursor: default; }
.gl-side-item.off:hover { background: none; }
.gl-n { font-size: var(--fs-sm); color: var(--text-3); }
.gl-side-item.on .gl-n { color: var(--brand); }

/* 条目 */
.gl-group { margin-bottom: 18px; }
.gl-gh { display: flex; align-items: center; gap: 8px; margin: 0 0 9px; font-size: var(--fs-sm); color: var(--text-3); }
.gl-gh > span:first-child { font-weight: 500; letter-spacing: .04em; }
.gl-gn { flex: 1; display: flex; align-items: center; gap: 8px; }
.gl-gn::before { content: ""; flex: 1; height: 1px; background: var(--line); }

.gl-item {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 14px 16px; margin-bottom: 10px;
}
.gl-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.gl-name { font-size: var(--fs-md); font-weight: 500; color: var(--text); }
.gl-tag { font-size: var(--fs-xs); padding: 1px 7px; border-radius: var(--r-sm); background: var(--brand-weak); color: var(--brand-dark); }
.gl-one { margin: 6px 0 0; font-size: var(--fs-base); color: var(--text-2); line-height: 1.7; }
.gl-rows {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-2);
  display: flex; flex-direction: column; gap: 7px;
}
.gl-row { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 10px; font-size: var(--fs-base); line-height: 1.75; }
.gl-k { color: var(--text-3); }
.gl-v { color: var(--text-2); }
.gl-ul { margin: 0; padding-left: 15px; }
.gl-ul li { margin: 0 0 4px; }
.gl-ul li:last-child { margin-bottom: 0; }
.gl-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.gl-chip { font-size: var(--fs-sm); padding: 1px 8px; border-radius: var(--r-pill); background: var(--line-2); color: var(--text-2); }

/* 手机端：单列；分类改横向滚动（放不下就滑，不折行） */
@media (max-width: 768px) {
  .gl-search { flex: 1 1 auto; }
  .gl-wrap { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .gl-side {
    position: static; flex-direction: row; gap: 6px;
    overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch;
  }
  .gl-side-item { flex: 0 0 auto; background: var(--line-2); }
  .gl-side-item.on { background: var(--brand-weak); }
  .gl-item { padding: 12px 13px; }
  .gl-row { grid-template-columns: 48px minmax(0, 1fr); font-size: var(--fs-sm); }
}