add settings locations

data/settings.css

@@ -279,33 +279,138 @@
         text-align: center;
       }
 
-      .status-message {
-        margin-top: 20px;
-        padding: 15px;
-        border-radius: 10px;
-        font-weight: 600;
-        text-align: center;
+      /* Modern Notification Toast */
+      .notification-toast {
+        position: fixed;
+        top: 24px;
+        right: 24px;
+        min-width: 320px;
+        max-width: 400px;
+        background: rgba(255, 255, 255, 0.98);
+        border-radius: 16px;
+        box-shadow: 
+          0 20px 25px -5px rgba(0, 0, 0, 0.1),
+          0 10px 10px -5px rgba(0, 0, 0, 0.04),
+          0 0 0 1px rgba(0, 0, 0, 0.05);
+        backdrop-filter: blur(20px);
+        z-index: 99999;
         display: none;
+        align-items: flex-start;
+        gap: 12px;
+        padding: 16px;
+        transform: translateX(100%);
+        opacity: 0;
+        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+        pointer-events: auto;
+        border: 1px solid rgba(255, 255, 255, 0.2);
       }
 
-      .status-success {
-        background: #d4edda;
-        color: #155724;
-        border: 2px solid #c3e6cb;
+      .notification-toast.show {
+        transform: translateX(0);
+        opacity: 1;
       }
 
-      .status-error {
-        background: #f8d7da;
-        color: #721c24;
-        border: 2px solid #f5c6cb;
+      .notification-icon {
+        flex-shrink: 0;
+        width: 40px;
+        height: 40px;
+        border-radius: 12px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 18px;
+        font-weight: 600;
+        color: white;
+        background: linear-gradient(135deg, #10b981, #059669);
       }
 
-      .status-info {
-        background: #cce7ff;
-        color: #004085;
-        border: 2px solid #b3d9ff;
+      .notification-body {
+        flex: 1;
+        min-width: 0;
       }
 
+      .notification-title {
+        font-size: 14px;
+        font-weight: 600;
+        color: #111827;
+        margin-bottom: 4px;
+        line-height: 1.2;
+      }
+
+      .notification-message {
+        font-size: 13px;
+        color: #6b7280;
+        line-height: 1.4;
+        word-wrap: break-word;
+      }
+
+      .notification-close {
+        flex-shrink: 0;
+        width: 32px;
+        height: 32px;
+        border: none;
+        background: none;
+        color: #9ca3af;
+        cursor: pointer;
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.2s ease;
+        margin-top: -4px;
+        margin-right: -4px;
+      }
+
+      .notification-close:hover {
+        background: rgba(0, 0, 0, 0.05);
+        color: #374151;
+      }
+
+      .notification-close:active {
+        transform: scale(0.95);
+      }
+
+      /* Toast Types */
+      .notification-toast.success .notification-icon {
+        background: linear-gradient(135deg, #10b981, #059669);
+      }
+
+      .notification-toast.error .notification-icon {
+        background: linear-gradient(135deg, #ef4444, #dc2626);
+      }
+
+      .notification-toast.info .notification-icon {
+        background: linear-gradient(135deg, #3b82f6, #2563eb);
+      }
+
+      .notification-toast.warning .notification-icon {
+        background: linear-gradient(135deg, #f59e0b, #d97706);
+      }
+
+      /* Animation */
+      @keyframes slideInRight {
+        from {
+          transform: translateX(100%);
+          opacity: 0;
+        }
+        to {
+          transform: translateX(0);
+          opacity: 1;
+        }
+      }
+
+      @keyframes slideOutRight {
+        from {
+          transform: translateX(0);
+          opacity: 1;
+        }
+        to {
+          transform: translateX(100%);
+          opacity: 0;
+        }
+      }
+
+
       .learning-mode {
         display: none;
         text-align: center;
@@ -417,4 +522,14 @@
           border-right: none;
           border-bottom: 1px solid #e9ecef;
         }
+
+        /* Mobile notification bubble adjustments */
+        .notification-bubble {
+          top: 10px;
+          right: 10px;
+          left: 10px;
+          max-width: none;
+          font-size: 14px;
+          padding: 12px 16px;
+        }
       }