Update public/css/base.css

public/css/base.css

@@ -91,19 +91,29 @@ input { font: inherit; }
 }
 .notification {
   display: flex; align-items: flex-start; gap: 10px;
-  padding: 12px 16px; border-radius: var(--radius-md);
+  padding: 10px 12px 10px 14px; border-radius: var(--radius-md);
   background: var(--bg-raised); border: 1px solid var(--border-bright);
   box-shadow: var(--shadow-md);
   max-width: 360px; font-size: 13px; color: var(--text);
   pointer-events: auto;
   animation: slideInRight 0.22s ease;
+  position: relative;
 }
 .notification.warning { border-color: rgba(229,200,70,0.4); }
 .notification.error { border-color: rgba(220,60,60,0.4); }
 .notification.success { border-color: rgba(45,212,166,0.4); }
 .notification .notif-close {
-  margin-left: auto; color: var(--text-muted); font-size: 16px;
-  background: none; border: none; cursor: pointer; padding: 0 2px;
+  position: absolute;
+  top: 6px;
+  right: 8px;
+  color: var(--text-muted); font-size: 15px;
+  background: none; border: none; cursor: pointer;
+  line-height: 1; padding: 2px 4px;
+  border-radius: 4px;
+  transition: color var(--transition), background var(--transition);
+}
+.notification .notif-close:hover {
+  color: var(--text); background: var(--bg-hover);
 }
 
 /* Share banner */
@@ -135,4 +145,4 @@ input { font: inherit; }
 @keyframes shimmer {
   0% { background-position: -200% 0; }
   100% { background-position: 200% 0; }
-}
+}