:root{
  --bg:#FFFFFF;
  --border:#E5E7EB;
}


/* 圆形按钮基础样式 */
.btn-circle{
  --btn-size: 56px;                 /* 直径 */
  --btn-bg: #111827;                /* 背景色 */
  --btn-fg: #ffffff;                /* 文本/图标色 */
  --btn-bg-hover: #0b1220;          /* 悬停背景 */
  --btn-ring: #60a5fa;              /* 聚焦描边色 */

  width: var(--btn-size);
  height: var(--btn-size);
  border-radius: 50%;
  border: 0;
  color: var(--btn-fg);
  background: var(--btn-bg);
  display: inline-grid;
  place-items: center;
  line-height: 1;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.2);
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, opacity .2s ease;
}

/* 图标适配（如放 SVG）*/
.btn-circle svg{
  width: 50%;
  height: 50%;
  display: block;
}

/* 悬停与按压 */
.btn-circle:hover{ 
  background: var(--btn-bg-hover);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
.btn-circle:active{
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.btn-circle.center-bottom {
  position: relative;
  left: 50%;
  bottom: 40px;             /* 距离底部 */
  transform: translateX(-50%); /* 水平居中对齐 */
}

/* 键盘可访问 */
.btn-circle:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px var(--btn-ring), 0 8px 20px rgba(0,0,0,.2);
}

/* 禁用态 */
.btn-circle:disabled{
  opacity: .5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* 尺寸变体 */
.btn-circle.sm{ --btn-size: 40px; font-size: 13px; }
.btn-circle.lg{ --btn-size: 72px; font-size: 18px; }

/* 浮动按钮（可选：右下角悬浮） */
.btn-fab{
  position: fixed;
  right: 24px; bottom: 24px;
  z-index: 50;
}