diff --git a/css/main.css b/css/main.css
index f5b8cd7..fa2d372 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1184,4 +1184,71 @@ h2:has(+ #exam-list:empty), h2:has(+ #packet-list:empty){
.title-bar-button:hover {
background-color: darkgray;
+}
+
+/* Sync Status Styles */
+#sync-status {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ font-size: 0.85rem;
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.85);
+ margin: auto 0.8rem;
+ padding: 0.3rem 0.6rem;
+ border-radius: 4px;
+ background-color: rgba(255, 255, 255, 0.05);
+ transition: background-color 0.3s ease;
+}
+
+.sync-dot {
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ display: inline-block;
+}
+
+.sync-dot.saved {
+ background-color: #4CAF50;
+ box-shadow: 0 0 8px #4CAF50;
+}
+
+.sync-dot.syncing {
+ background-color: #FFC107;
+ box-shadow: 0 0 8px #FFC107;
+ animation: pulse-syncing 1.2s infinite ease-in-out;
+}
+
+.sync-dot.failed {
+ background-color: #F44336;
+ box-shadow: 0 0 8px #F44336;
+ animation: pulse-failed 1s infinite alternate;
+}
+
+.sync-text {
+ letter-spacing: 0.2px;
+}
+
+@keyframes pulse-syncing {
+ 0% {
+ transform: scale(0.85);
+ opacity: 0.6;
+ }
+ 50% {
+ transform: scale(1.15);
+ opacity: 1;
+ }
+ 100% {
+ transform: scale(0.85);
+ opacity: 0.6;
+ }
+}
+
+@keyframes pulse-failed {
+ from {
+ box-shadow: 0 0 4px #F44336;
+ }
+ to {
+ box-shadow: 0 0 12px #F44336;
+ }
}
\ No newline at end of file
diff --git a/index.html b/index.html
index 63001e2..6a43c25 100644
--- a/index.html
+++ b/index.html
@@ -48,6 +48,7 @@
fullscreen
RTS
+