/* ============================================
   AI创作星球 — SVG 图标库
   用法: <svg class="icon icon-paint"><use href="/assets/icons.svg#paint"></use></svg>
   或直接用 .icon-* class 配合 CSS mask-image
============================================ */

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.icon svg {
  display: block;
}
/* 尺寸 */
.icon-sm  { width: 16px; height: 16px; }
.icon-md  { width: 22px; height: 22px; }
.icon-lg  { width: 32px; height: 32px; }
.icon-xl  { width: 48px; height: 48px; }
.icon-2xl { width: 64px; height: 64px; }

/* 金色渐变图标容器 */
.icon-box {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(240,192,96,0.1);
  border: 1px solid rgba(240,192,96,0.2);
}
.icon-box.blue  { background:rgba(74,158,255,0.1);  border-color:rgba(74,158,255,0.2); }
.icon-box.teal  { background:rgba(45,212,191,0.1);  border-color:rgba(45,212,191,0.2); }
.icon-box.amber { background:rgba(232,147,74,0.1);  border-color:rgba(232,147,74,0.2); }
.icon-box.green { background:rgba(52,211,153,0.1);  border-color:rgba(52,211,153,0.2); }