/* Timer System Styles */
.upw-timer-display {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 2px !important;
    padding: 6px 10px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border-radius: 8px !important;
    border: 1px solid #e5e7eb !important;
    min-width: 100px !important;
}

.upw-timer-row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.upw-timer-label {
    font-size: 9px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    color: #9ca3af !important;
}

.upw-session-time,
.upw-total-time {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    font-family: 'Courier New', monospace !important;
    letter-spacing: 0.3px !important;
}

.upw-session-time {
    color: #3b82f6 !important;
}

.upw-total-time {
    color: #10b981 !important;
}

/* Timer Notification */
.upw-timer-notification {
    position: absolute !important;
    top: -40px !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(-10px) !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
    z-index: 1000 !important;
}

.upw-timer-notification.show {
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) !important;
}

.upw-timer-notification::after {
    content: '' !important;
    position: absolute !important;
    bottom: -6px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 6px solid transparent !important;
    border-right: 6px solid transparent !important;
    border-top: 6px solid #764ba2 !important;
}

/* Timer styles for different themes */
.upw-header.theme-fireflies .upw-timer-display,
.upw-header.theme-bubbles .upw-timer-display,
.upw-header.theme-stars .upw-timer-display,
.upw-header.theme-leaves .upw-timer-display,
.upw-header.theme-hearts .upw-timer-display,
.upw-header.theme-electric .upw-timer-display,
.upw-header.theme-cyber .upw-timer-display {
    background: rgba(0, 0, 0, 0.4) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.upw-header.theme-fireflies .upw-timer-label,
.upw-header.theme-bubbles .upw-timer-label,
.upw-header.theme-stars .upw-timer-label,
.upw-header.theme-leaves .upw-timer-label,
.upw-header.theme-hearts .upw-timer-label,
.upw-header.theme-electric .upw-timer-label,
.upw-header.theme-cyber .upw-timer-label {
    color: rgba(255, 255, 255, 0.6) !important;
}

.upw-header.theme-fireflies .upw-session-time,
.upw-header.theme-bubbles .upw-session-time,
.upw-header.theme-stars .upw-session-time,
.upw-header.theme-leaves .upw-session-time,
.upw-header.theme-hearts .upw-session-time,
.upw-header.theme-electric .upw-session-time,
.upw-header.theme-cyber .upw-session-time {
    color: #60a5fa !important;
}

.upw-header.theme-fireflies .upw-total-time,
.upw-header.theme-bubbles .upw-total-time,
.upw-header.theme-stars .upw-total-time,
.upw-header.theme-leaves .upw-total-time,
.upw-header.theme-hearts .upw-total-time,
.upw-header.theme-electric .upw-total-time,
.upw-header.theme-cyber .upw-total-time {
    color: #34d399 !important;
}