.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    display: inline-block;
    vertical-align: middle;
}

.isometric-bg {
    background-color: #f6faf9;
    background-image:
        linear-gradient(30deg, #ebefee 12%, transparent 12.5%, transparent 87%, #ebefee 87.5%, #ebefee),
        linear-gradient(150deg, #ebefee 12%, transparent 12.5%, transparent 87%, #ebefee 87.5%, #ebefee),
        linear-gradient(30deg, #ebefee 12%, transparent 12.5%, transparent 87%, #ebefee 87.5%, #ebefee),
        linear-gradient(150deg, #ebefee 12%, transparent 12.5%, transparent 87%, #ebefee 87.5%, #ebefee),
        linear-gradient(60deg, #dfe3e2 25%, transparent 25.5%, transparent 75%, #dfe3e2 75%, #dfe3e2),
        linear-gradient(60deg, #dfe3e2 25%, transparent 25.5%, transparent 75%, #dfe3e2 75%, #dfe3e2);
    background-size: 80px 140px;
    background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;
    opacity: 0.4;
}

.isometric-grid {
    background-image: radial-gradient(circle, #bdc9c8 1px, transparent 1px);
    background-size: 24px 24px;
}

.toast {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.toast.hide {
    opacity: 0;
    transform: translateY(-12px);
}

.spinner {
    width: 18px; height: 18px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.modal-backdrop {
    background: rgba(24,28,28,0.45);
    backdrop-filter: blur(2px);
}

.canvas-host {
    position: relative;
    width: 100%;
    height: 100%;
}

.canvas-host canvas {
    display: block;
    width: 100%;
    height: 100%;
}

dialog::backdrop {
    background: rgba(24,28,28,0.45);
}