/* ==================== SVG ICON SYSTEM ==================== */
/* Inline SVG icons replacing emoji characters for clean, consistent iconography */

.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon-sm {
    width: 12px;
    height: 12px;
    stroke-width: 2
}

.icon-lg {
    width: 20px;
    height: 20px;
    stroke-width: 1.5
}

.icon-xl {
    width: 24px;
    height: 24px;
    stroke-width: 1.4
}

/* Rail icons (larger for sidebar) */
.ri-ico .icon {
    width: 18px;
    height: 18px;
    stroke-width: 1.6
}

/* Button icons (inline with text) */
.btn-p .icon,
.btn-s .icon,
.btn-o .icon,
.btn-d .icon {
    width: 13px;
    height: 13px;
    stroke-width: 2;
}

/* Toast icons */
.toast-icon .icon {
    width: 14px;
    height: 14px
}

/* Stage bar icons */
.zb .icon {
    width: 12px;
    height: 12px;
    stroke-width: 2.2
}

.tb-btn .icon {
    width: 13px;
    height: 13px;
    stroke-width: 2
}

/* Canvas toolbar icons */
.ct-btn .icon {
    width: 11px;
    height: 11px;
    stroke-width: 2
}

/* Layer panel icons */
.ly-btn .icon {
    width: 12px;
    height: 12px;
    stroke-width: 2
}

/* Delete/close icons */
.rm-btn .icon {
    width: 8px;
    height: 8px;
    stroke-width: 2.5
}

.ti-del .icon {
    width: 9px;
    height: 9px;
    stroke-width: 2.5
}