.icon{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;line-height:1}.icon svg{display:block;width:1em;height:1em}.icon-xs{font-size:12px}.icon-sm{font-size:16px}.icon-md{font-size:24px}.icon-lg{font-size:32px}.icon-xl{font-size:48px}.icon-2xl{font-size:64px}.icon-primary{color:var(--theme-brand)}.icon-secondary{color:var(--layout-text-secondary)}.icon-success{color:var(--layout-badge-done-text)}.icon-warning{color:var(--layout-badge-progress-text)}.icon-danger{color:var(--layout-badge-cancel-text)}.icon-info{color:var(--layout-badge-confirmed-text)}.icon-muted{color:var(--layout-text-muted)}.icon-spin{animation:icon-spin 1s linear infinite}.icon-pulse{animation:icon-pulse 1s ease-in-out infinite}@keyframes icon-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes icon-pulse{0%,to{opacity:1}50%{opacity:.5}}@media(prefers-reduced-motion:reduce){.icon-spin,.icon-pulse{animation:none}}.icon-hover{transition:transform .2s ease,color .2s ease}.icon-hover:hover{transform:scale(1.1)}.btn .icon,button .icon{margin-right:.5em}.btn .icon:last-child,button .icon:last-child{margin-right:0;margin-left:.5em}.btn .icon:only-child,button .icon:only-child{margin:0}.icon-picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:8px;max-height:300px;overflow-y:auto;padding:12px;background:var(--layout-bg-light);border-radius:8px}.icon-picker-item{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border:2px solid transparent;border-radius:8px;background:var(--layout-card-bg);cursor:pointer;transition:all .2s}.icon-picker-item:hover{border-color:var(--theme-brand);background:var(--layout-bg-hover)}.icon-picker-item.selected{border-color:var(--theme-brand);background:var(--theme-brand);color:var(--theme-brand-contrast)}.icon-picker-item .icon{font-size:24px}.icon-preview{display:flex;align-items:center;gap:12px;padding:16px;background:var(--layout-bg-light);border-radius:8px}.icon-preview .icon{font-size:48px}.icon-preview-info{flex:1}.icon-preview-name{font-weight:600;font-size:var(--font-size-md);margin-bottom:4px}.icon-preview-code{font-family:var(--font-family-mono);font-size:var(--font-size-base);color:var(--layout-text-secondary);background:var(--layout-bg-hover);padding:4px 8px;border-radius:4px}