/* ================================================================
   icons.css —— 全站统一 Lucide 线性图标样式
   用法：<svg class="lucide lucide-{name}"><use href="path/to/lucide-sprite.svg#{name}" /></svg>
   尺寸四档（width/height 成对）：
     .lucide-sm  16px
     .lucide     18px （默认）
     .lucide-md  20px
     .lucide-lg  24px
   颜色：全部用 currentColor 继承父元素 color
   ==================================================================== */

.lucide {
  /* 强制让 use 引用 sprite 时也继承 stroke/fill；某些浏览器默认不继承 */
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 18px;
  height: 18px;
  display: inline-block;
  vertical-align: -0.15em; /* 避免和文字基线错位 */
  flex-shrink: 0;
  user-select: none;
  -webkit-user-select: none;
}
.lucide-sm { width: 16px; height: 16px; }
.lucide-md { width: 20px; height: 20px; }
.lucide-lg { width: 24px; height: 24px; }

/* 让 sprite 符号内的 <g> 不要自己的 stroke 覆盖 CSS 变量；
   但实际 sprite 里写了 stroke="currentColor" stroke-width="1.5" 所以保险起见再强制一次 */
.lucide * {
  stroke: inherit;
  stroke-width: inherit;
  stroke-linecap: inherit;
  stroke-linejoin: inherit;
  fill: inherit;
}

/* 常见容器组合：左侧图标 + 文字，统一图标与文字间距 6px */
.icon-left { display: inline-flex; align-items: center; gap: 6px; }
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color .25s var(--ease-spring, cubic-bezier(.22,1,.36,1)),
              color .25s var(--ease-spring, cubic-bezier(.22,1,.36,1)),
              border-color .25s var(--ease-spring, cubic-bezier(.22,1,.36,1)),
              transform .2s var(--ease-spring, cubic-bezier(.22,1,.36,1));
}
.icon-btn:hover {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
}
.icon-btn:active { transform: scale(.96); }

/* 登录弹窗输入框左侧图标：默认灰色，聚焦父元素时变青色 */
.input-group .field-icon {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  color: var(--text-muted);
  transition: color .2s ease;
  pointer-events: none;
}
.input-group:focus-within .field-icon { color: var(--primary); }

/* reduced-motion：降低/关闭 SVG 内动画（如果后续 SVG 有 animate 的话） */
@media (prefers-reduced-motion: reduce) {
  .lucide { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}