Add birthday support for mobile calendar

mobile-calendar/src/App.sass

@@ -477,6 +477,17 @@ body
     &::before
       width: 8px
 
+  &.birthday-event
+    background: linear-gradient(135deg, rgba(255, 107, 157, 0.1) 0%, rgba(255, 182, 193, 0.15) 100%)
+    border-left: 4px solid #ff6b9d
+    
+    &::before
+      background: linear-gradient(to bottom, #ff6b9d, rgba(255, 107, 157, 0.3))
+    
+    &:hover
+      background: linear-gradient(135deg, rgba(255, 107, 157, 0.15) 0%, rgba(255, 182, 193, 0.2) 100%)
+      box-shadow: 0 4px 20px rgba(255, 107, 157, 0.3)
+
   .event-content
     flex: 1
     min-width: 0
@@ -490,6 +501,28 @@ body
       margin-bottom: var(--spacing-xs)
       word-break: break-word
       line-height: 1.4
+      display: flex
+      align-items: center
+      gap: var(--spacing-xs)
+      flex-wrap: wrap
+
+      .birthday-icon
+        color: #ff6b9d
+        font-size: 1.1rem
+        animation: birthday-bounce 2s infinite
+        filter: drop-shadow(0 2px 4px rgba(255, 107, 157, 0.3))
+
+      .birthday-label
+        background: linear-gradient(135deg, #ff6b9d 0%, #e91e63 100%)
+        color: white
+        font-size: 0.625rem
+        font-weight: 600
+        padding: 2px 6px
+        border-radius: 8px
+        text-transform: uppercase
+        letter-spacing: 0.5px
+        margin-left: auto
+        box-shadow: 0 2px 6px rgba(255, 107, 157, 0.3)
 
     .event-user
       font-size: 0.875rem
@@ -507,6 +540,17 @@ body
         background: currentColor
         opacity: 0.6
 
+      .event-source
+        font-size: 0.75rem
+        opacity: 0.7
+        font-style: italic
+
+      .read-only-indicator
+        font-size: 0.75rem
+        opacity: 0.7
+        font-style: italic
+        color: var(--text-muted)
+
   .event-actions
     display: flex
     gap: var(--spacing-xs)
@@ -514,6 +558,36 @@ body
     position: relative
     z-index: 1
 
+    .birthday-indicator
+      display: flex
+      align-items: center
+      justify-content: center
+      width: 36px
+      height: 36px
+      border-radius: 50%
+      background: linear-gradient(135deg, #ff6b9d 0%, #e91e63 100%)
+      color: white
+      box-shadow: 0 3px 10px rgba(255, 107, 157, 0.4)
+      animation: birthday-glow 3s infinite
+
+      .gift-icon
+        font-size: 0.875rem
+        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2))
+
+    .read-only-indicator
+      display: flex
+      align-items: center
+      justify-content: center
+      width: 36px
+      height: 36px
+      border-radius: 50%
+      background: linear-gradient(135deg, var(--text-muted) 0%, var(--text-secondary) 100%)
+      color: white
+      opacity: 0.7
+
+      .read-only-text
+        font-size: 0.875rem
+
   .edit-form
     width: 100%
     display: flex
@@ -552,6 +626,18 @@ body
       justify-content: flex-end
       margin-top: var(--spacing-sm)
 
+@keyframes birthday-bounce
+  0%, 100%
+    transform: translateY(0) scale(1)
+  50%
+    transform: translateY(-2px) scale(1.1)
+
+@keyframes birthday-glow
+  0%, 100%
+    box-shadow: 0 3px 10px rgba(255, 107, 157, 0.4)
+  50%
+    box-shadow: 0 6px 20px rgba(255, 107, 157, 0.6)
+
 // Buttons
 .btn
   border: none
@@ -851,13 +937,30 @@ body
       .event-text
         font-size: 0.9rem
 
+        .birthday-icon
+          font-size: 1rem
+
+        .birthday-label
+          font-size: 0.5rem
+          padding: 1px 4px
+
       .event-user
         font-size: 0.8rem
 
+        .event-source
+          font-size: 0.7rem
+
     .event-actions
       justify-content: flex-end
       margin-top: var(--spacing-xs)
 
+      .birthday-indicator
+        width: 32px
+        height: 32px
+
+        .gift-icon
+          font-size: 0.75rem
+
     .btn-small
       width: 32px
       height: 32px