chore: build

frontend-prep/src/App.css

@@ -41,12 +41,14 @@ html, body, #root {
 
 .toast-container {
   position: fixed;
-  bottom: 20px;
-  right: 20px;
+  top: calc(var(--topbar-h, 60px) + 10px);
+  left: 50%;
+  transform: translateX(-50%);
   display: flex;
   flex-direction: column;
-  gap: 10px;
-  z-index: 9999;
+  align-items: center;
+  gap: 8px;
+  z-index: 950;
   pointer-events: none;
 }
 

frontend-prep/src/components/Toast.css

@@ -1,132 +1,108 @@
-/* ===== TOAST PROFESSIONAL STYLES ===== */
+/* ===== TOAST MINIMAL STYLES ===== */
 .toast {
   position: fixed;
-  bottom: 28px;
-  right: 28px;
-  min-width: 360px;
-  max-width: 450px;
-  padding: 14px 18px;
-  border-radius: 12px;
-  backdrop-filter: blur(40px);
-  -webkit-backdrop-filter: blur(40px);
+  top: calc(var(--topbar-h, 60px) + 10px);
+  left: 50%;
+  transform: translate(-50%, 0);
+  width: min(340px, calc(100vw - 32px));
+  padding: 9px 14px;
+  border-radius: 10px;
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
   border: 1px solid rgba(255, 255, 255, 0.08);
-  box-shadow: 
-    0 10px 40px rgba(0, 0, 0, 0.2),
-    inset 0 1px 1px rgba(255, 255, 255, 0.1);
-  animation: toastSlideIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-  z-index: 9999;
+  border-left-width: 3px;
+  background: var(--surface, #111115);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
+  animation: toastSlideDown 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  z-index: 950;
   overflow: hidden;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
 }
 
-@keyframes toastSlideIn {
+@keyframes toastSlideDown {
   from {
-    transform: translateX(480px);
+    transform: translate(-50%, -12px);
     opacity: 0;
   }
   to {
-    transform: translateX(0);
+    transform: translate(-50%, 0);
     opacity: 1;
   }
 }
 
 /* SUCCESS - VIOLET */
 .toast-success {
-  background: linear-gradient(135deg, rgba(124, 58, 237, 0.1) 0%, rgba(124, 58, 237, 0.05) 100%);
-  border-color: rgba(124, 58, 237, 0.3);
+  border-left-color: #7c3aed;
   color: #7c3aed;
 }
 
 .toast-success .toast-icon {
   color: #7c3aed;
-  background: rgba(124, 58, 237, 0.15);
-  border: 1px solid rgba(124, 58, 237, 0.4);
 }
 
 .toast-success .toast-progress {
-  background: linear-gradient(90deg, #7c3aed, #a78bfa, transparent);
+  background: #7c3aed;
 }
 
 /* ERROR */
 .toast-error {
-  background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(220, 38, 38, 0.04) 100%);
-  border-color: rgba(239, 68, 68, 0.2);
+  border-left-color: #dc2626;
   color: #dc2626;
 }
 
 .toast-error .toast-icon {
   color: #dc2626;
-  background: rgba(239, 68, 68, 0.1);
-  border: 1px solid rgba(239, 68, 68, 0.25);
 }
 
 .toast-error .toast-progress {
-  background: linear-gradient(90deg, #dc2626, #b91c1c, transparent);
+  background: #dc2626;
 }
 
 /* WARNING */
 .toast-warning {
-  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(217, 119, 6, 0.04) 100%);
-  border-color: rgba(245, 158, 11, 0.2);
+  border-left-color: #d97706;
   color: #d97706;
 }
 
 .toast-warning .toast-icon {
   color: #d97706;
-  background: rgba(245, 158, 11, 0.1);
-  border: 1px solid rgba(245, 158, 11, 0.25);
 }
 
 .toast-warning .toast-progress {
-  background: linear-gradient(90deg, #d97706, #b45309, transparent);
+  background: #d97706;
 }
 
 /* INFO */
 .toast-info {
-  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(37, 99, 235, 0.04) 100%);
-  border-color: rgba(59, 130, 246, 0.2);
+  border-left-color: #2563eb;
   color: #2563eb;
 }
 
 .toast-info .toast-icon {
   color: #2563eb;
-  background: rgba(59, 130, 246, 0.1);
-  border: 1px solid rgba(59, 130, 246, 0.25);
 }
 
 .toast-info .toast-progress {
-  background: linear-gradient(90deg, #2563eb, #1d4ed8, transparent);
+  background: #2563eb;
 }
 
 .toast-content {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 8px;
 }
 
 .toast-icon {
-  font-size: 18px;
+  font-size: 13px;
   font-weight: 700;
-  min-width: 32px;
-  width: 32px;
-  height: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 8px;
   flex-shrink: 0;
-  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-}
-
-.toast:hover .toast-icon {
-  transform: scale(1.08);
 }
 
 .toast-message {
-  font-size: 14px;
+  font-size: 12.5px;
   font-weight: 500;
-  line-height: 1.5;
-  flex: 1;
+  line-height: 1.4;
+  flex: 1 1 auto;
   letter-spacing: 0.1px;
   color: var(--text);
 }
@@ -135,7 +111,8 @@
   position: absolute;
   bottom: 0;
   left: 0;
-  height: 2px;
+  height: 1.5px;
+  opacity: 0.6;
   animation: toastProgressBar linear forwards;
 }
 
@@ -148,23 +125,3 @@
   }
 }
 
-/* Responsive */
-@media (max-width: 640px) {
-  .toast {
-    bottom: 20px;
-    right: 20px;
-    left: 20px;
-    min-width: auto;
-    max-width: none;
-  }
-}
-
-@media (hover: none) {
-  .toast {
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
-  }
-  
-  .toast:hover .toast-icon {
-    transform: none;
-  }
-}