feat: implement map visualization, layer management, and searching for poverty data records

assets/css/style.css

@@ -841,3 +841,55 @@ body.right-panel-open .custom-layer-panel {
 .emoji-marker .bubble.ibadah      { background: linear-gradient(135deg, #f97316, #ea580c); }
 .emoji-marker .bubble.miskin-in   { background: linear-gradient(135deg, #ef4444, #dc2626); }
 .emoji-marker .bubble.miskin-out  { background: linear-gradient(135deg, #22c55e, #16a34a); }
+
+/* ===== Toast Notification ===== */
+#toastContainer {
+    position: fixed;
+    bottom: 28px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 9999;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+    pointer-events: none;
+}
+
+.toast {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 12px 20px;
+    border-radius: 12px;
+    font-size: 13px;
+    font-weight: 500;
+    color: white;
+    box-shadow: 0 6px 24px rgba(0,0,0,0.18);
+    backdrop-filter: blur(6px);
+    pointer-events: auto;
+    animation: toastSlideIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
+    max-width: 340px;
+    text-align: center;
+}
+
+.toast.hiding {
+    animation: toastSlideOut 0.3s ease forwards;
+}
+
+.toast-success { background: linear-gradient(135deg, #22c55e, #16a34a); }
+.toast-error   { background: linear-gradient(135deg, #ef4444, #dc2626); }
+.toast-info    { background: linear-gradient(135deg, #6366f1, #4f46e5); }
+.toast-warning { background: linear-gradient(135deg, #f59e0b, #d97706); }
+
+.toast-icon { font-size: 16px; flex-shrink: 0; }
+
+@keyframes toastSlideIn {
+    0%   { opacity: 0; transform: translateY(20px) scale(0.9); }
+    100% { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+@keyframes toastSlideOut {
+    0%   { opacity: 1; transform: translateY(0) scale(1); }
+    100% { opacity: 0; transform: translateY(10px) scale(0.95); }
+}