body { font-family: 'Cairo', sans-serif; background-color: #f3f4f6; -webkit-tap-highlight-color: transparent; padding-bottom: 80px; }
.teal-theme { background-color: #009688; }
.teal-text { color: #009688; }
.card { background: white; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); padding: 16px; margin-bottom: 16px; }
.screen { display: none; animation: fadeIn 0.3s ease-in-out; }
.screen.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Vertical Timeline CSS */
.timeline-container { position: relative; padding-right: 20px; margin-bottom: 20px; }
.timeline-container::before { content: ''; position: absolute; right: 9px; top: 10px; bottom: 10px; width: 2px; background-color: #cbd5e1; }
.timeline-item { position: relative; margin-bottom: 16px; }
.timeline-dot { position: absolute; right: -20px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background-color: #009688; border: 2px solid white; box-shadow: 0 0 0 2px #009688; }
.timeline-dot.pending { background-color: white; border-color: #cbd5e1; box-shadow: none; }
.timeline-content { padding-right: 15px; }

/* Toggle Switch */
.toggle-checkbox:checked { right: 0; border-color: #68D391; }
.toggle-checkbox:checked + .toggle-label { background-color: #68D391; }

#reader { width: 100%; border-radius: 16px; overflow: hidden; }
#reader video { object-fit: cover; border-radius: 16px; }