/* ===== SVG Icon Styles ===== */
/* 集中管理所有项目内联 SVG 图标的尺寸与样式，便于统一维护迭代 */

/* ---------- Tab Bar 底部导航图标 ---------- */
.tab-icon {
  width: 24px;
  height: 24px;
  margin-bottom: 4px;
}

/* ---------- 冥想类型图标（设置页-类型选择区） ---------- */
.type-icon {
  width: 28px;
  height: 28px;
  margin-bottom: 6px;
  display: inline-block;
}

/* ---------- 冥想类型图标（类型偏好开关列表） ---------- */
.type-toggle-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

/* ---------- 冥想类型图标（类型选择器弹窗） ---------- */
.type-picker-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ---------- 结束提示音图标 ---------- */
.sound-option .sound-icon {
  width: 28px;
  height: 28px;
  display: inline-block;
  margin-bottom: 6px;
}

/* ---------- 计时器环形 SVG ---------- */
.timer-ring-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.timer-ring-bg {
  fill: none;
  stroke: var(--bg-elevated);
  stroke-width: 3;
}

.timer-ring-progress {
  fill: none;
  stroke: var(--accent-gold);
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s linear;
}

/* ---------- 设置页-列表行图标 ---------- */
.settings-row-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--accent-gold);
}

/* ---------- 设置页-弹窗顶部大图标 ---------- */
.contact-icon,
.share-friend-icon {
  width: 40px;
  height: 40px;
  color: var(--accent-gold);
  text-align: center;
  margin-bottom: 8px;
}

/* ---------- 设置页-联系方式行图标 ---------- */
.contact-method-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--accent-gold);
}

/* ---------- 设置页-分享按钮内小图标 ---------- */
.share-friend-btn-icon {
  width: 16px;
  height: 16px;
}