Update style.css

style.css

@@ -1,28 +1,17 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-
-.card p:last-child {
-	margin-bottom: 0;
-}
+body { font-family: 'Inter', sans-serif; background-color: #F7F8FC; color: #2C3E50; }
+.status-ok { border-left-color: #2ECC71; }
+.status-warning { border-left-color: #F1C40F; }
+.status-critical { border-left-color: #E74C3C; }
+.progress-ok { background-color: #2ECC71; }
+.progress-warning { background-color: #F1C40F; }
+.progress-critical { background-color: #E74C3C; }
+.input-number::-webkit-inner-spin-button, .input-number::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
+.input-number { -moz-appearance: textfield; }
+#toast-container { position: fixed; top: 20px; right: 20px; z-index: 1000; display: flex; flex-direction: column; gap: 10px; }
+.toast { padding: 12px 16px; border-radius: 6px; color: white; font-size: 14px; display: flex; align-items: center; gap: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); opacity: 0; transform: translateX(100%); transition: all 0.3s ease-in-out; }
+.toast.show { opacity: 1; transform: translateX(0); }
+.toast-success { background-color: #28a745; }
+.toast-error { background-color: #dc3545; }
+.toast-info { background-color: #17a2b8; }
+.icon-btn { color: #9ca3af; cursor: pointer; transition: color 0.2s; }
+.icon-btn:hover { color: #3b82f6; }