/* ========================================================================
   按钮体系：文本 / 图标 / 标签 / 圆形悬浮 / 点状
   统一高度、圆角、内边距；齐全 hover / focus / active / disabled。
   ======================================================================== */

/* 文本按钮 */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: var(--btn-h); padding-inline: var(--space-4);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card); color: var(--text);
  font-size: var(--fs-sm); line-height: 1; white-space: nowrap;
  transition: background-color .18s var(--ease), border-color .18s var(--ease),
              transform .08s var(--ease), color .18s var(--ease);
}
.btn:hover { border-color: var(--accent); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: .45; cursor: not-allowed; pointer-events: none;
}
.btn-sm { height: var(--btn-h-sm); padding-inline: var(--space-3); font-size: var(--fs-xs); }

.btn-primary {
  background: var(--accent); border-color: var(--accent);
  color: #fff;
}
:root[data-theme="night"] .btn-primary { color: #08110f; }
.btn-primary:hover { filter: brightness(1.06); }

.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--accent-soft); }

/* 图标按钮（方形） */
.icon-btn {
  display: inline-grid; place-items: center;
  width: var(--btn-h); height: var(--btn-h);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card); color: var(--text);
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.icon-btn:hover { border-color: var(--accent); background: var(--accent-soft); }
.icon-btn svg { width: 18px; height: 18px; }

/* 标签按钮（筛选 / 跳转） */
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  height: var(--btn-h-sm); padding-inline: var(--space-3);
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--card-muted); color: var(--text-muted);
  font-family: var(--font-mono); font-size: var(--fs-xs);
  transition: all .15s var(--ease);
}
button.tag { cursor: pointer; }
.tag:hover { color: var(--text); border-color: var(--accent); }
.tag[aria-pressed="true"], .tag.is-active {
  background: var(--accent-soft); color: var(--accent);
  border-color: var(--accent);
}

/* 圆形悬浮按钮（菜单 / 返回 / 回到顶部 / 分享） */
.fab {
  display: inline-grid; place-items: center;
  width: var(--fab); height: var(--fab);
  border: 1px solid var(--line); border-radius: 50%;
  background: rgb(var(--glass) / .82);
  backdrop-filter: blur(10px);
  color: var(--text);
  box-shadow: 0 6px 20px rgb(var(--shadow) / .18);
  transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
/* 只变色不位移：hover 上浮会让按钮显得不稳定，改成纯边框/背景反馈 */
.fab:hover { border-color: var(--accent); }
.fab svg { width: 20px; height: 20px; }

/* 点状导航按钮（大卡片目录） */
.dot {
  position: relative;
  width: 11px; height: 11px; padding: 0;
  border: 1.5px solid var(--text-muted); border-radius: 50%;
  background: transparent;
  transition: all .15s var(--ease);
}
.dot:hover { border-color: var(--accent); transform: scale(1.2); }
.dot[aria-current="true"] {
  background: var(--accent); border-color: var(--accent);
  transform: scale(1.15);
}
/* hover 显示对应卡片标题 */
.dot::after {
  content: attr(data-title);
  position: absolute; right: 150%; top: 50%; transform: translateY(-50%);
  padding: 3px 8px; border-radius: var(--radius-sm);
  background: rgb(var(--glass) / .95); border: 1px solid var(--line);
  color: var(--text); font-size: var(--fs-xs); white-space: nowrap;
  font-family: var(--font-mono);
  opacity: 0; pointer-events: none; transition: opacity .15s var(--ease);
  box-shadow: 0 4px 14px rgb(var(--shadow) / .2);
}
.dot:hover::after, .dot:focus-visible::after { opacity: 1; }