/* ============================================================
   Lucide Icons — Base CSS (mask-image approach)
   Pure CSS icon system — no JS/fonts required.
   Works in MAUI WebView, modern browsers, offline.
   ============================================================ */

[class*="lucide-"] {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask-image: var(--i);
    mask-image: var(--i);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Spin animation (for loaders) */
.lucide-spin {
    animation: lucide-spin 1s linear infinite;
}
@keyframes lucide-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}